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1. XFAngularJS 


AngularJS 是 Google 开源 出 来 的 一 套 js 工具 。 下 面 简 称 其 为 ng 。 这 里 只 说 它 是 “ 工 
具 ”， 没 说 它 是 完整 的 “框架 "， 是 因为 它 并 不 是 定位 于 去 完成 一 套 框架 要 做 的 事 。 更 重要 
的 ， 是 它 给 我 们 揭示 了 一 种 新 的 应 用 组 织 与 开发 方式 。 


ng 最 让 我 称奇 的 ， 是 它 的 数据 双向 绑 定 。 其 实 想 想 ， 我 们 一 直 在 提 数 据 和 与 表现 的 分 离 ， 
但 是 这 里 的 "双向 绑 定 "从 某 方面 来 说 ， 是 把 数据 与 表现 完全 绑 定 在 一 起 一 一 数据 变化 ， 
表现 也 变化 。 反 之 ， 表 现 变 化 了 ， 内 在 的 数据 也 变化 。 有 过 开发 经 验 的 人 能 体会 到 这 种 
机 制 对 于 前 病 应 用 来 说 ， 是 很 有 必要 的 ， 能 带 来 维护 上 的 巨大 优势 。 当 然 ， 这 里 的 绑 定 
与 提倡 的 分 离 并 不 是 矛盾 的 。 





ng 可 以 和 jQuery 集成 工作 ， 事 实 上 ， 如 果 没 有 jQuery, ng 目 己 也 做 了 一 个 轻 量 级 的 
jQuery ， 主 要 实现 了 元 素 操作 部 分 的 API- 


关于 ng 的 几 点 : 


。 对 IE 方面 ， 它 兼容 IES 及 以 上 的 版 本 。 
。 5 jQuery 集成 工作 ， 它 的 一 些 对 象 与 jQuery 相关 对 象 表现 是 一 致 的 。 
。 使 用 ng 时 不 要 冒 然 去 改变 相关 DOM 的 结构 。 


2. 天 于 本 文档 


这 份 文 档 如 其 名 ， 是 我 自己 学 习 ng 的 过 程 记 录 。 只 是 过 程 记 录 ， 没 有 刻意 像 教 程 那 样 
去 做 。 所 以 呢 ， 从 前 至 后 ， 中 间 不 锡 有 一 些 概念 不 清 不 明 的 地 方 。 eae Sent 
Mr Ext FER SARA REAR A. MA, ETSERKEN 
到 最 后 的 “ 自 定义 " 那 几 章 ， 特 别 是 “ 自 定义 指 命 ”， 那 几 章 过 完 ， a Ba ng 本 来 的 面 
狐 。 前 面 融 不 要 太 纠 结 概念 ， 本 质 ， 知 着 怎么 用 融 好 。 





3. 开始 的 例子 
我 们 从 一 个 完整 的 例子 开始 认识 


<!DOCTYPE html> 


1 
2 
3 
4 "utf-8" 
3 
6 
7 
8 


"text/javascript" "jquery-1.8.3.js" 
9 "text/javascript" "angular.js" 


13 "BoxCtrl" 
14 "width: 100px; height: 100px; background-color: red;" 
15 “erick” 


17 Text!" wy 
18 utext" m" 


22 "text/javascript" "utf-8" 


25 = 


27 //$element 就 是 一 个 jQuery 对 象 


从 上 面 的 代码 中 ， 我 们 看 到 在 通 弟 的 Es A 引入 了 一 些 标记 ， 这 些 束 是 ng 
的 模板 机 制 ， 它 不 光 完 成 数据 泻 染 的 工作 ， 还 实现 了 数据 绑 定 的 功能 。 


同时 ， 在 HTML 中 的 本 身 的 DOM 层级 结构 ， 被 ng 利用 起 来 ， 下 搂 作 为 它 的 内 部 机 制 
2 ana, mined re Ac SR 
就 是 在 div 的 Ctrl 的 作用 范围 之 内 。 


其 它 的 ， 也 同样 写 一 些 js 代码 ， 里 面 重要 的 是 作 一 些 数 据 的 操作 ， 事 件 的 绑 定 定义 等 。 
这 样 ， 数 据 的 变化 融会 和 页 面 中 的 DOM 表现 联系 起 来 。 一 旦 这 种 联系 建立 起 来 ， 也 即 
完成 了 我 们 所 说 的 “ 双 同 绑 定 "。 然 后 ， 这 里 说 的 “事件 ”"， 除 了 那些 “点 击 " 等 通 弟 的 DOM 
事件 之 外 ， 我 们 还 玩 天 注 “ 数 据 变化 "这 个 事件 。 


最 后 ， 可 以 使 用 : 
来 把 整个 页 面 驱动 起 来 了 。 (你 可 以 看 到 一 个 可 被 控制 大 小 的 红色 方块 ) 


更 完整 的 方法 是 定义 一 个 APP : 


<!DOCTYPE html> 
W MyApp W 


ie pero 


"text/javascript" "jJquery-1.8.3.js" 
"text/javascript" "angular.js" 


"TestCtrl" 
文臣 Wut 


"text/javascript" 


'ok'! 


//angular .bootstrap(document .documentElement); 
MYApp 





这 里 说 的 一 个 App 就 是 ng 概念 中 的 一 个 Module 。 对 于 Controller 来 说 ， 如 果 不 想 使 
用 全 局 函数 ， 也 可 以 在 app 中 定义 : 


‘MyApp ' 
'TestCtrl1' 


"OK 





上 面 我 们 使 用 ng-app 来 指明 要 使 用 的 App ， 这 样 的 话 可 以 把 显 式 的 初始 化 工作 省 了 。 


一 般 完 整 的 过 程 是 : 


= i 'Demo', [] 
"Demo ' 


使 用 angular.bootstrap 来 显示 地 做 初始 化 工具 ， 参 数 指明 了 根 节点 ， 装 载 的 模块 


(可 以 是 多 个 模块 ) 。 


4. 依赖 注入 


injector, 我 从 ng 的 文档 中 得 知 这 个 概念 ， 之 后 去 翻 看 源码 时 了 解 了 一 下 这 个 机 制 的 工 


作 原 理 。 感 觉 束 是 虽然 与 上 自己 的 所 想 仅 舌 那 么 一 点 感 ， 但 束 是 这 么 一 后 感 ， 让 我 感慨 想 
象 力 之 伸 奇 。 


先 看 我 们 之 前 代码 中 的 一 处 国 数 定 义 : 


Le i i eee 


在 这 个 函数 定义 中 ， 注 意 那 两 个 参数 : $scope, $element ， 这 是 两 个 很 有 意思 的 东 
西 。 总 的 来 说 ， 它 们 是 参数 ， 这 没什么 可 说 的 。 但 又 不 仅仅 是 参数 一 一 你 换个 名 字 代 码 
就 不 能 正常 运行 了 。 





事实 上 ， 这 两 个 参数 ， 除 了 完成 “参数 "的 本 身 任务 之 外 ， 还 作为 一 种 语法 糖 完 成 了 “依赖 
声明 ”的 任务 。 本 来 这 个 函数 定义 ， 完 整 的 写法 应 该 像 AMD 声明 一 样 ， 写 成 : 


= |'$scope', '$element' 


这 样 焉 很 明显 ， 委 示 有 一 个 画 数 ， 它 依赖 于 两 个 未 西 ， 然 后 这 两 个 东西 会 依次 作为 参数 
传人 。 


简单 起 见 ， 融 生成 了 一 个 范 数 定义 原本 的 样子 ， 然 后 在 定义 参数 的 名 池上 作文 章 ， 来 起 
到 依赖 声明 的 作用 。 


在 处 理 时 ， 通 过 函数 对 象 的 toString) 方法 可 以 知道 这 个 图 数 定义 代码 的 字符 串 表现 形 
式 ， 然 后 就 知道 它 的 参数 是 $scope 和 $element 。 通 过 名 字 判 断 出 这 是 两 个 外 部 依赖 ， 
然后 融 去 获取 资源 ， 最 后 把 资源 作为 参数 ， 调 用 定义 的 范 效 。 


所 以 ， 参 数 的 名 字 是 不 能 随便 写 的 ， 这 里 也 充分 利用 了 js 的 特点 来 尽量 做 到 "反省 "了 。 


在 Python 中 受 限 于 函数 名 的 命名 规则 ， 写 出 来 不 太 好 看 。 不 过 也 得 利于 反省 机 制 ， 做 
到 这 点 也 很 容易 : 


# -- coding: utf-8 -- 


def f 
print 





这 里 提 到 的 “作用 域 "的 概念 ， 是 一 个 在 沁 围 上 与 DOM 结构 一 致 ， 数 据 上 相对 于 某 个 
$scope 对 象 的 属性 的 概念 。 我 们 还 是 从 HTML 代码 上 来 人 手 : 


"BoxCtr1" 
"width: 100px; height: 100px; background-color: red;" 
Se Teka 


text 
“text” 





上 面 的 代码 中 ， 我 们 给 一 个 div 元 素 指定 了 一 个 BoxCtrl, ABA, divitRZA, ME 
BoxCtrl 这 个 函数 运行 时 ， $scope 这 个 注入 资源 的 控制 范围 。 在 代码 中 我 们 看 到 的 
click() ，w，h 这 些 示 西 ， 它 们 本 来 的 位 置 对 应 于 $scope.click, $scope.w ， 
$scope.h 。 


我 们 在 后 面 的 js 代码 中 ， 也 可 以 看 到 我 们 融 是 在 操作 这 些 变 量 。 依 赖 于 ng 的 数据 绑 定 
机 制 ， 操 作 变 量 的 结果 直接 在 页 面 上 表现 出 来 了 。 


6. 效 据 缚 定 与 模板 


我 纠结 了 半天 ，" 数 据 绑 定 "与 “模板 "这 两 个 未 西 还 真 没 办 法 分 开 来 说 。 因 为 数据 绑 定 需 
以 模板 为 载体 ， 离 开 了 模板 ， 数 据 还 线 个 毛 啊 。 


ngQh—-Atim, MEANE MARES A, ASMA, RAD ATA. 


6.1. 数据 -> 模板 
数据 到 表现 的 绑 定 ， 主 要 是 使 用 模板 标记 种 接 完 成 的 : 


speci x EN |] 


使 用 {{ 这 个 标记 ， 束 可 以 直接 引用 ， 并 绑 定 一 个 作用 域内 的 变量 。 在 实现 上 ， ng 
动 创建 了 一 个 watcher 。 效 果 融 是 ， 不 管 因 为 什么 ， 如 果 作 用 域 的 变量 发 生 了 改变 ， 我 
们 随时 可 以 让 相应 的 页 面 表 现 也 随 之 改变 。 我 们 可 以 看 一 个 更 纯粹 的 例子 : 


"TestcCtrl" 


"text/javascript" 





上 面 的 例子 在 页 面 载 和 人 之后， 我 们 可 以 在 页 面 上 看 到 123 。 这 时 ， 我 们 可 以 打开 一 个 
Awe lls, MA: 


'#test' . sa = '12345' 
'#test'). : 


上 面 的 代码 执行 之 后 ， 融 可 以 看 到 页 面 变化 了 。 


对 于 使 用 ng 进行 的 事件 缚 定 ， 在 处 理 葬 效 中 天 不 需要 去 关心 $digest() 的 调用 了 。 因为 
ng 会 自己 处 理 。 源 码 中 ， 对 于 ng 的 事件 线 定 ， 真 正 的 义理 范 数 不 是 指定 名 字 的 函数 ， 
而 是 经 过 $apply() 包 疤 过 的 一 个 酌 效 。 这 个 $apply( 做 的 一 件 事 ， 束 是 调用 根 作用 域 
$rootScope 的 $digest() ， 这 样 整个 世界 就 清净 了 : 


"TestCtrl" eer 


"text/javascript" 





那个 click RAVEN, SEN RMS AUF : 


这 里 的 $scope.$apply() 中 做 的 一 件 事 : 


6.2. 模板 -> 数据 


模板 到 效 据 的 绑 定 ， 主 要 是 通过 ng-model 来 完成 的 : 


= boxe: ="test" - ="TestCtrl" 


="text/javascript" ="utf-8"> 


= irae 





这 时 修改 input FIG, ABBE Ape : 


查看 ， 发 现 变量 a 的 值 已 经 更 改 了 。 


实际 上 ， ng-model 是 把 两 个 方向 的 绑 定 都 做 了 。 它 不 光 显 示 出 变量 的 值 ， 也 把 显示 上 
的 数值 变化 反映 给 了 变量 。 这 个 在 实现 上 就 简单 多 了 ， 只 是 绑 定 change 事件 ， 然 后 做 
一 些 赋值 操作 有 即 可 。 不 过 ng 里 ， 还 要 区 分 对 竺 不 同 的 控件 。 


6.3. 数据 -> 模板 -> 数据 -> 模板 


现在 要 考虑 的 是 一 种 在 现实 中 很 普通 的 一 个 需求 。 上 比如 就 是 我 们 可 以 输入 数值 ， 来 控制 
一 个 矩形 的 长 度 。 在 这 里 ， 数 据 与 表现 的 关系 是 : 


。 长 度数 值 保 存在 变量 中 

变量 显示 于 某 个 input 中 
变量 的 值 即 是 和 矩形 的 长 度 
input 中 的 值 变化 时 ， 变 量 也 要 变化 
input 中 的 值 变化 时 ， 和 矩形 的 长 度 也 要 变化 


当然 ， 要 实现 目的 在 这 里 可 能 融 不 止 一 种 方案 了 。 按 照 以 前 的 做 法 ， 很 自然 地 会 想法 ， 
绑 定 input 的 change 事件 ， 然 后 去 做 一 些 事 惑 好 了 了。 但是， 我 们 前 面 提 到 过 ng-model 
这 个 东西 ， 利 用 它 就 可 以 在 不 手工 处 理 change 的 条 件 下 完成 数据 的 展现 需求 ， 在 此 基 
础 之 上 ， 我 们 还 需要 做 的 一 点 ， 融 是 把 变化 后 的 数据 应 用 到 窍 形 的 长 度 之 上 。 


最 开始 ， 我 们 面 对 的 应 该 是 这 样 一 个 东西 : 


"TestCctrl" 
"width: 100px; height: 10px; background-color: red" 
"text" "width" "width" 


"text/javascript" "utf-8" 


= 100 





我 们 从 响应 数据 变化 ， 但 又 不 使 用 change 事件 的 角度 来 看 ， 可 以 这 样 处 理 宽 度 变 化 : 





使 用 $watch() 来 线 定 数据 变化 。 
当然 ， 这 种 祥 式 的 问题 ， 有 更 直接 有 效 的 手段 ， ng 的 数据 绑 定 总 是 让 人 惊异 : 
"TestCctrl" 
"width: 10px; height: 10px; background-color: red" 


OXL: "width" “style.width" 


"text/javascript" 


109026 “px” 





前 面 讲 了 数据 绑 定 之 后 ， 现 在 可 以 单独 讲 讲 模板 了 。 


作为 一 套 能 称 之 谓 “ 模 板 " 的 系统 ， 除 了 能 干 一 些 模板 的 常规 的 事 之 外 (好 吧 ， 即 使 是 常 
规 的 逻辑 判断 现在 它 也 做 不 了 的 ) ， 配 合作 用 域 $scope 和 ng 的 数据 双向 绑 定 机 制 |， 
ng 的 模板 系统 整 变 得 比较 神奇 了 。 


7.1. 定义 模板 内 容 
定义 模板 的 内 容 现在 有 三 种 方式 : 


1 在 需要 的 地 方 直接 写字 符 串 
2， 外 部 文件 
3. 使 用 script 标签 定义 的 “内 部 文件 ” 


第 一 种 不 需要 多 说 。 第 二 种 和 第 三 种 都 可 以 和 ng-include 一 起 工作 ， 来 引入 一 段 模板 。 
让 接 引 入 同 域 的 外 部 文件 作为 模板 的 一 部 分 : 


"ıtpl.html'" 


"'tpl.html'" 





注意 ， src 中 的 字符 串 会 作为 表达 式 义理 〈 可 以 是 $scope HHS), MA, BRS 
名 字 的 话 需要 使 用 引号 。 


引入 script 定义 的 “内 部 文件 ”: 


"text/ng-template" 


"text/ng-template" 


y= 1 tpl' nm 


VAR 





7.2. AR BRE 
7.2.1. 重复 ng-repeat 


这 算是 唯一 的 一 个 控制 标签 么 .…...， 它 的 使 用 方法 类 型 于 : 


“TestCtrl" 
"member in obj_list" 





除 此 之 外 ， 它 还 提供 了 几 个 变量 可 供 使 用 : 


。 $index 当前 索引 

e Sfirst 是 否 为 头 元 素 

e $middle 是 否 为 非 头 非 尾 元 素 
。 $last 是 否 为 尾 元 素 


“Testctrl" 
"member in obj_list" 





7.2.2. 赋值 ng-init 


这 个 指令 可 以 在 模板 中 直接 赋值 ， 它 作用 于 angular.bootstrap 之 前 ， 并 且 ， 定 义 的 变量 
与 $scope FARER. 


Testetrl "a=[1,2,3,4];" 
"member in a" 





7.3. 节点 控制 
7.3.1. 样式 ng-style 


可 以 使 用 一 个 结构 直接 表示 当前 节点 的 样式 : 


"width: 100 + 'px’, height: 100 + "px', backgroundColor: 'red'}" 





同样 地 ， 绑 下 一 个 变量 的 话 ， 威 力 大 了 。 
7.3.2. 类 ng-class 
融 是 直接 地 设置 当前 节点 的 类 ， 同 样 ， 配 合 效 据 绑 定 作 用 残 大 了 : 


"TestCtrl" "els" 


ng-class-even 和 ng-class-odd 是 和 ng-repeat 配合 使 用 的 : 
ee u 
"todd'" "even!" "m in 1" 
注意 里 面 给 的 还 是 表示 式 ， 别 少 了 引号 。 
7.3.3. 显示 和 隐藏 ng-show ng-hide ng-switch 
前 两 个 是 控制 display WHER : 


"true" 
"False" 
"true" 
"False" 





h3 style=" font-size: small; margin: O auto; text-shadow: 1px 1px 1px gray; padding: 
2px; color: #555;">7.3.4. 其 它 属 性 控制 


ng-src 控制 src 属性 : 


< Es ="{{ uaa is + "ead. png' ve [> 


ng-href 控制 href 属性 : 


| = NN gi 193° rs | 


总 的 来 说 : 


e ng-src src 属 性 

。 ng-href href 属 性 

e ng-checked 选中 状态 
e ng-selected 被 选择 状态 
e ng-disabled 禁用 状态 
e ng-multiple 多 选 状态 

e ng-readonly 只 读 状态 


注意 : 上 面 的 这 些 只 是 单 同 线 定 ， 即 只 是 从 数据 到 展示 ， 不 能 反作用 于 数据 。 要 双 同 绪 
定 ， 还 是 要 使 用 ng-model o 


7.4. BEATE 


事件 绑 定 是 模板 指令 中 很 好 用 的 一 部 分 。 我 们 可 以 把 相关 事件 的 义理 酌 数 直接 写 在 
DOM 中 ， 这 样 做 的 最 大 好 处 就 是 可 以 从 DOM 结构 上 看 出 业务 义理 的 形式 ， 你 知道 当 你 
点 击 这 个 节点 时 哪个 图 数 人 被 执行 了 。 


e ng-change 

e ng-click 

e ng-dbiclick 

e ng-mousedown 
e ng-mouseenter 
e ng-mouseleave 
e ng-mousemove 
e ng-mouseover 
e ng-mouseup 

e ng-submit 


对 于 事件 对 象 本 身 ， 在 函数 调用 时 可 以 直接 使 用 Seven 进行 传递 : 


"Click($event)" 
"click($event.target)" 


7.5. 表单 控件 


表单 控件 类 的 模板 指 合 ， 最 大 的 作用 是 它 预 定义 了 需要 绑 定 的 数据 的 格式 。 这 样 ， 束 可 
以 对 于 必定 的 数据 进行 既定 的 义理。 


7.5.1. form 


form 是 核心 的 一 个 控件 。 ng 对 form 这 个 标签 作 了 和 包装。 事实 上 ， ng 自己 的 指令 是 叫 
ng-form 的 ， 区 别 在 于 ， form 标签 不 能 藤 套 ， 而 使 用 ng-form 指令 融 可 以 做 诅 套 的 表单 
Is 


form 的 行为 中 依赖 它 里 面 的 各 个 输入 控制 的 状态 的 ， 在 这 里 ， 我 们 主要 关心 的 是 form 
自己 的 一 些 方法 和 属性 。 从 ng 的 角度 来 说 ， fom 标签 ， 是 一 个 模板 指 合 ， 也 创建 了 一 
个 FormController 的 实例 。 这 个 实例 就 提供 了 相应 的 属性 和 方法 。 同 时 ， 它 里 面 的 控件 
也 是 一 个 NgModelController 实例 。 


很 重要 的 一 点 ， form 的 相关 方法 要 和 生效， 必须 为 form 标签 指定 name 和 ng-controller 
， 并且 每 个 控件 都 要 绑 定 一 个 变量 。 form 和 控件 的 名 字 ， 即 是 $scope 中 的 相关 实例 的 
引用 变量 名 。 


"test form" "TestCtrl" 
"text" mam waw 
"see( ) u 





除去 对 象 的 方法 与 属性 ， form 这 个 标签 本 身 有 一 些 动 态 类 可 以 使 用 : 


ng-valid 当 表 单 验 证 通过 时 的 设置 
ng-invalid 当 表 单 验证 失败 时 的 设置 
ng-pristine 表单 的 未 被 动 之 前 拥有 
ng-dirty 表单 被 动 过 之 后 拥有 


form 对 象 的 属性 有 : 


e $pristine 表单 是 否 未 被 动 过 
。 $dirty Rž EBR 

。 $valid 表单 是 否 验 证 通过 

e $invalid 表单 是 否 验 证 失败 

e $error 表单 的 验证 错误 

其 中 的 $error 对 象 包含 有 所 有 字段 的 验证 信息 ， 及 对 相关 字段 的 NgModelController 实 
例 的 引用 。 它 的 结构 是 一 个 对 象 ， key 是 失败 信息 ， reduired ， minlength 之 类 的 ， 


value 是 对 应 的 字段 实例 列表 。 


注意 ， 这 里 的 失败 信息 是 按 序 列 取 的 一 个 。 比 如 ， 如 果 一 个 字段 既 要 求 reduired ， 也 要 
求 minlength, FASE ABH, cane 中 只 有 required 的 失败 信息 。 只 输入 一 个 字符 
之 后 ， required 条 件 满 足 了 ， 才 可 能 有 minlength 这 个 失败 信息 。 


"test form" "TestCtrl" 





7.5.2. input 


input 是 数据 的 最 主要 入 口 。 ng 支持 HTML5 中 的 相关 属性 ， 同 时 对 旧 浏 览 器 也 做 了 兼 
容 性 处 理 。 最 重要 的 ， input 的 规则 定义 ， 是 所 属 表 单 的 相关 行为 的 参照 (比如 表单 是 
否 验证 成 功 ) 。 


input 控件 的 相关 可 用 属性 为 : 


e name HF 

e ng-model 绑 定 的 数据 

。 required 是 否 必 填 

e ng-required 是 否 必 填 

e ng-minlength 最 小 长 度 

。 ng-maxlength 最 大 长 度 

e ng-pattern 匹配 模式 

e ng-change 值 变化 时 的 回调 


"test form" "TestCtrl" 
"Text! nm I San 


"see( ) n 





input 控件 ， 它 还 有 一 些 扩 展 ， 这 些 扩 展 有 些 有 目 己 的 属性 : 


e input type="number" 多 了 number 错误 类 型 多 了 max, min 属性 。 
e input type="url" 2 fF url 错误 类 型 。 
e input type="email" 多 了 email 错误 类 

7.5.3. checkbox 


它 也 算是 input 的 扩展 ， 不 过 ， 它 没有 验证 相关 的 东西 ， 只 有 选中 与 不 选中 两 个 值 : 





"test form" "TestCtrl" 
"checkbox" a ar IRA. "BB" 


A: 


1. controller 要 初始 化 变量 值 。 
2. controller 中 的 初始 化 值 会 关系 到 控件 状态 MSE) o 


7.5.4. radio 


也 是 input 的 扩展 。 和 checkbox 一 样 ， 但 它 只 有 一 个 值 了 : 


"test _ form" "TestCtrl" 
erstehen Wa MAA" 
uradio” van "BB" 





7.5.5. textarea 
同 input 。 

7.5.6. select 

这 是 一 个 比较 牛 B 的 控件 。 它 里 面 的 一 个 叫做 ng-options 的 属性 用 于 数据 呈现 。 
对 于 给 定 列 表 时 的 使 用 。 

最 简单 的 使 用 方法 ， x for x in list 


"test_form" "TestCtrl1" "o=[0,1,2,3]; a=o[1];" 
"a" “X FOr xino“ "show( )" 


"text/javascript" 





在 $scope A, select 绑 定 的 变量 ， 其 值 和 普通 的 value 无 关 ， 可 以 是 一 个 对 象 : 


"test. form" "TestCtrl" 
"o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];" 
A. "x.name for x in o" "show( )" 





显示 与 值 分 别 BE, x.v as x.name for x ino 


"test Torm" Testctr 
"o=[{name: 'AA', v: '00'}, {name: 'BB', v: '11'}]; a=o[1].v;" 
za "x.v as x.name for x in o" "show( )" 





加 入 分 组 的 ， x.name group by x.g for x ino 


"test_form" "Testctrl" 
"o=[{name: 'AA', g: '00'}, fname: ‘BB’, g: '11'}, {name: ‘CC', g: '00'}],; 


"a" "x.name group by x.g for x in o" "show()" 





分 组 了 还 分 别 指定 显示 与 值 的 ， x.v as x.name group by x.g for x in o 


"test_form" "TestCtrl" "o=[{name: 'AA', g: '00', v: 
r="), fname: "BB", qi "da", ve 14r name CC gf 7007, vi IiI]; a=olli.ve" 
car "x.v aS X.name group by x.g for x in o" 
"show( ) i 





如 果 参 效 是 对 象 的 话 ， 基 本 也 是 一 样 的 ， 只 是 把 通 历 的 对 象 改 成 (key, value) 


"test_form" "TestCtrl" "o={a: 
kan FOr (K V) In o" "show()" 


"test_form" "TestCtr1" 
"o={a: {name: 'AA', v: '@0'}, b: {name: 'BB', v: '11'}}; a=0.a.v;" 
ew "y.v as v.name for (k, v) in o” "show()" 


"test_form" "Testctrl" 
"o={a: {name: 1 "00", gt == bi (mame: “BB, Vi 147, g: 
'=='}}, a=0.a;" 
a .name group by v.g for (k, v) in o" 
"show()" 


"test_form" "TestCtrl" 
"o={a: {name: vi '00', g: '=='}, b: {name: ‘BB’, v: ‘11°, g: 
'=='}}, a=O.a.v;" 


“a” "v.v aS v.name group by v.g for (k, v) in o" 


"show( ) i 





8. 


这 
过 
多 





模板 中 的 过 滤器 


里 说 的 过 滤器 ， 是 用 于 对 数据 的 格式 化 ， 或 者 筛选 的 本 数 。 它 们 可 以 直接 在 模板 中 通 
一 种 语法 使 用 。 对 于 音 用 功能 来 说 ， 是 很 方便 的 一 种 机 制 。 


个 过 滤器 之 间 可 以 下 接连 续 使 用 。 


8.1. 排序 orderBy 


orderBy 是 一 个 排序 用 的 过 滤器 标签 。 它 可 以 像 sort 函数 那样 支持 一 个 排序 函数 ， 也 可 
以 简单 地 指定 一 个 属性 名 进行 操作 : 


"Testctril" 


"text/javascript" 





8.2. it EI filter 
filter 是 一 个 过 滤 内 容 的 标签 。 


如 果 参 数 是 一 个 字符 串 ， 则 列表 成 员 中 的 任意 属性 值 中 有 这 个 字符 串 ， 即 为 满足 条 件 
(忽略 大 小 写 ) 


"TestCtrl" 


"text/javascript" 





可 以 使 用 对 象 ， 来 指定 属性 名 ， $ 表示 任意 属性 : 





目 定 义 的 过 滤 图 数 也 支持 : 


"TestCtrl" 


"text/javascript" 


return 





83. HE 


时 间 玲 格式 化 date : 


"TestCtrl" 


"text/javascript" 





列表 截取 limitTo ， 支 持 正 负数 : 


1,2,3,4,5] | 2 
12345) | x 


大 小 写 lowercase, uppercase : 


abe’ | 
"Abc' | 


8.4. 例子 : 表 头 排序 
"TestCtrl1" 


"f='name'; rev=!rev" 
"f='age'; rev=!rev" 


"o in data | orderBy: f : rev" 


1 
2 
3 
4 
5 
6 
7 
8 
9 


"text/javascript" 





8.5. 例子 : BR 


"TestCir "s=data[QO].name; g=''" 
"text" Egi 


utre” ugu 
"o.name as o.name + '(' + o.age + ')' for o in data | filter: 


{name: q} | orderBy: ['age', 'name'] " 


"text/javascript" 


'B'! 
VAJ 
tD! 
HEN 





准确 地 说 ， 这 应 该 叫 对 hashchange 事件 的 处 理 吧 。 


Kreta URL 中 的 锚 点 部 分 发 生变 化 时 ， 触 发 预先 定义 的 业务 逻辑 。 上 比如 现在 是 
/test#/x ， 锚 点 部 分 的 值 为 # 后 的 /x ， 它 就 对 应 了 一 组 处 理 逻 辑 。 当 这 部 分 变 
化 时 ， 上 比如 变 成 了 /test#/t ， 这 时 页 面 是 不 会 刷新 的 ， 但 是 它 可 以 触发 另外 一 组 处 
理 逻 辑 ， 来 做 一 些 事 ， 也 可 以 让 页 面 发 生变 化 。 


这 种 机 制 对 于 复 厅 的 单 页 面 来 说 ， 无 疑 是 一 种 强大 的 业务 切 分 手段 。 殊 算 不 是 复杂 的 单 
页 面 应 用 ， 在 普通 页 面 上 善 用 这 种 机 制 ， 也 可 以 让 业务 逻辑 和 更 容易 控制 。 


ng 提供 了 完善 的 锚 氮 路 由 功能 ， 虽 然 目 前 我 觉得 相当 重要 的 一 个 功能 还 有 竺 完善 《后 面 
会 说 ) ， 但 目前 这 功能 的 几 部 分 内 容 ， 已 经 让 我 思考 了 很 多 种 可 能 性 了 。 


ng 中 的 锚 点 路 由 功能 是 由 几 部 分 API 共同 完成 的 一 整套 方案 。 这 其 中 包括 了 路 由 定 
L, DAEL, JREF, 


9.1. 路 由 定义 


要 使 用 错 点 路 由 功能 ， 需 要 在 先 定义 它 。 目 前 ， 对 于 定义 的 方法 ， 我 个 人 只 发 现在 “初始 
化 "阶段 可 以 通过 $routeProvider 这 个 服务 来 定义 。 


在 定义 一 个 app HALE RE: 


"ngView" 


"text/javascript" 





首先 看 ng-view 这 个 directive ， 它 是 一 个 标记 “ 锚 点 作用 区 ”的 指 合 。 目 前 页 面 上 只 能 
有 一 个 “ 锚 点 作用 区 ”"。 有 人 已 经 提 了 ,“ 多 个 可 命名 "的 锚 点 作用 区 的 代码 到 官方 ， 但 是 目 
前 官方 还 没有 接受 合并 ， 我 觉得 多 个 作用 区 这 个 功能 是 很 重要 的 ， 希 望 下 个 发 布 版 中 能 
有 。 


锚 点 作用 区 的 功能 ， 束 是 让 销 操 路 由 定义 时 的 那些 模板 ， controler 等 ， 它 们 产生 的 
HTML 代码 放 在 作用 区 内 。 


比如 上 面 的 代码 ， 当 你 刚 打 开 页 面 时 ， 页 面 是 空白 的 。 你 手动 访问 /#/test 就 可 以 看 
到 页 面 上 出 现 了 test 的 字样 。 


在 angular.bootstrap() 时 也 可 以 定义 : 





9.2. 参数 定义 


在 作 路 由 定义 时 ， 可 以 匹配 一 个 规则 ， 规 则 中 可 以 定义 路 径 中 的 某 些 部 分 作为 参数 之 
用 ， 然 后 使 用 $routeParams 服务 获取 到 指定 参数 。 上 比如 /#/book/test A, test fF 
为 参数 传人 到 controller 中 : 


="text/javascript"> 


'ngView' 
'/book/:title' 
: '{1{ title }}' 





访问 : /#/book/test 
不 需要 预定 义 模式 ， 也 可 以 像 普 通 GET 请 求 那样 获取 到 相关 参数 : 


'ngView' 
'/book' 


: "££ title }}! 





访问 : /#/book?title=test 


9.3. 业务 处 理 


简单 来 说 ， 当 一 个 锚 点 路 由 定义 被 匹配 时 ， 会 根据 模板 生成 一 个 $scope ， 同 时 相应 的 
一 个 controller 就 会 被 触发 。 最 后 模板 的 结果 会 被 填充 到 ng-view 中 去 。 


从 上 面 的 例子 中 可 以 看 到 ， 最 直接 的 方式 ， 我 们 可 以 在 模板 中 双向 绑 定 数据 ， 而 数据 的 
来 源 ， 在 controller 中 控制 。 在 controller 中 ， 又 可 以 使 用 到 像 $scope , 
$routeParams 这 些 服 务 。 


这 里 先 提 一 下 另外 一 种 与 锚 后 路 由 相关 的 服务 ， $route 。 这 个 服务 里 锚 点 路 由 在 下 义 
时 ， 及 匹配 过 程 中 的 信息 。 上 比如 我 们 搞怪 一 下 : 


'ngView' 


17a" 
e 


vas 


'/b'! 


aie 


Wy 





回 到 锚 点 定义 的 业务 处 理 中 来 。 我 们 可 以 以 字符 忠 形 式 写 模 板 ， 也 可 以 前 接 引 用 外 部 文 
件 作为 模板 : 


'ngView', [] 
'/test' 


'tpl.html' 





tpl.html 中 的 内 容 是 : 


jee bane | 


这 样 的 话 ， 模 板 可 以 预定 义 ， 也 可 以 很 复杂 了 。 


现在 暂时 后 了 模板 吧 ， 因 为 前 面 提 到 的 ， 当 前 ng-view 不 能 有 多 个 的 限制 ， 模 板 的 注 染 


机 制 局 限 性 还 是 很 大 的 。 不 过 ， 反 正 会 触发 一 个 controller, ARA ERR ARN A A 
尽量 地 干 自己 喜欢 的 事 : 


那个 空 的 template 不 能 省 ， 否 则 controller 不 会 被 触发 。 


10. 定义 模板 变量 标识 标签 





由 于 下 面 涉及 动态 内 容 ， 所 以 我 打算 起 一 个 后 疹 服 务 来 做 。 但 是 我 发 现 我 使 用 的 
Tornado 框架 的 模板 系统 ， 与 ng 的 模板 系统 ， 都 是 使 用 {{ }} 这 对 符号 来 定义 模板 
RIAM, BARAT, Bate ng 已 经 提供 了 修改 方法 : 





使 用 $interpolateProvider 服务 即 可 。 


11. AJAX 


ng 提供 了 基本 的 AJAX 封装 ， 你 直接 面 对 promise 对 象 ， 使 用 起 来 还 是 很 方便 的 。 


11.1. HTTP 请 求 


基本 的 操作 由 $http 服务 提供 。 它 的 使 用 很 简单 ， 提 供 一 些 摘 述 请 求 的 参 效 ， 请 求 丈 出 
去 了 ， 然 后 返回 一 个 扩充 了 success 方法 和 error 方法 的 promise wR (F næ), 
你 可 以 在 这 个 对 象 中 添加 需要 的 回调 函数 。 





$http 接受 的 配置 项 有 : 


e method 万 法 

e url 路 径 

e params GET 请 求 的 参数 

e data post 请 求 的 参数 

e headers X 

e transformRequest if Kin 4 ERR 

e transformResponse a Hi ERX 

e cache 缓存 

e timeout n 27, tA NiG kal RAIA 
e withCredentials 跨 域 安全 策略 的 一 个 东西 


其 中 的 transformRequest 和 transformResponse 及 headers 已 经 有 定义 的 ， 如 果 自 定 
义 则 会 履 盖 默认 定义 : 


= this = 
// transform incoming response data 


if 
// strip json vulnerability protection prefix 


IT && 
true 


oONOVPODNMH 


return 


// transform outgoing request data 


return && ! ? 


// default headers 


"Accept': 'application/json, text/plain, /' 
'Xx-Requested-With': 'XMLHttpRequest ' 


'Content-Type': ‘application/json;charset=utf-8' 
'Content-Type': ‘application/json;charset=utf-8' 





注意 它 默 认 的 POST 方法 出 去 的 Content-Type 
对 于 几 个 标准 的 HTTP 方法 ， 有 对 应 的 shortcut : 


e $http.delete(url, config) 

e $http.get(url, config) 

e $http.head(url, config) 

e $http.jsonp(url, config) 

e $http.post(url, data, config) 
e $http.put(url, data, config) 


注意 其 中 的 JSONP 方法 ， 在 实现 上 会 在 页 面 中 添加 一 个 script 标签， 然后 放出 一 个 
GET 请 求 。 你 自己 定义 的 ， 匿 名 回调 罚 数 ， 会 被 ng 自己 给 一 个 全 局 变量 。 在 定义 请 
K, EA GET 参数 ， 你 可 以 使 用 JsoN_cALLBACK 这 个 字符 串 来 暂时 代 蔡 回调 男 数 
名 ， 之 后 ng 会 为 你 蔡 换 成 真正 的 函数 名 : 


: 'JSON_CALLBACK' 





$http 有 两 个 属性 : 


e defaults 请 求 的 全 局 配置 
e pendingRequests 当前 的 请 求 队列 状态 


= : 'here' return 


11.2. 广义 回调 管理 


MERCER H, ng 提供 了 广 叉 的 异步 回调 管理 的 机 制 。 $http 服务 是 在 其 之 上 封 委 出 
来 的 。 这 个 机 制 融 是 ng 的 $q 服务 。 


不 过 ng 的 这 套 机 制 总 的 来 说 实现 得 比较 简单 ， 搜 官方 的 说 法 ， 够 用 了 。 
使 用 的 方法 ， 基 本 上 是 : 


通过 $q 服务 得 到 一 个 deferred 实例 

通过 deferred 实例 的 promise 属性 得 到 一 个 promise 对 象 
promise 3t& 4 $ E l ENA KIJZ 

deferred 实例 负责 触发 回调 


//defer.reject('xx'); 
yx! 





了 解 了 上 面 的 东西 ， 再 分 别 看 $q, deferred, promise 这 三 个 东西 。 


11.2.1. $q 
$q 有 四 个 方法 : 


e $q.all() 合并 多 个 promise ， 得 到 一 个 新 的 promise 

e $q.defer() 返回 一 个 deferred 对 象 

e $q.reject() 包 闭 一 个 错误 ， 以 使 回调 链 能 正确 人 处理 下 去 
e $q.when() 返回 一 个 promise 对 象 


$q.all() 方法 适用 于 并 发 场景 很 合适 : 





$q.reject() 方法 是 在 你 捕捉 异常 之 后 ， 又 要 把 这 个 异常 在 回调 链 中 传 下 去 时 使 用 : 


要 理解 这 东西 ， 先 看 看 promise 的 链 式 回调 是 如 何 运 作 的 ， 看 下 面 两 段 代 码 的 区 别 : 


return 'xxx' 





return 'xxx' 





MRE La, HaeHR", BAT eH". 


m $q.reject() 的 作用 就 是 触发 后 链 的 error 回调 : 


return 
return 


return 
return 


'ok, 1 EE 
‘error, ' + 





11.2.2. deferred 


deferred 对 象 有 两 个 方法 一 个 属性 。 


e promise 属性 就 是 返回 一 个 promise xt RAY. 
e resolve() 成 功 回调 
e reject() 失败 回调 





"ok, I + 
error. $ 


//defer.reject('xx'); 
a a a 


11.2.3. promise 


promise 对 象 只 有 then) DH}, AARD Eh RKA AR Mw EAN BREIT 
promise 对 象 ， 以 用 于 链 式 调用 。 


12. 工具 函数 





12.1. | FMA 


angular.bind ERR#HITEFNHE, SIHSHENIANN. 





12.2. 对 象 处 理 


对 象 复制 : angular.copy() 





对 象 聚 合 : angular.extend() 





ZEA: angular.noop() 
大 小 写 转 换 : angular.lowercase() 和 angular.uppercase() 
JSON 转 换 : angular.fromJson() 和 angular.toJson() 


Wm JH : angular.forEach() ， 支 持 列表 和 对 象 : 





12.3. 类 型 判定 


angular.isArray 
angular.isDate 
angular.isDefined 
angular.isElement 
angular.isFunction 
angular.isNumber 
angular.isObject 
angular.isString 
angular.isUndefined 


13.1. 日 志 


ng 提供 Slog 这 个 服务 用 于 同 终 问 输 出 相关 信息 : 


e error() 
e info() 


。 log() 
e warn() 





13.2. £2 


ng 提供 了 一 个 简单 封装 了 缓存 机 制 $cacheFactory ， 可 以 用 来 作为 数据 容器 : 





调用 时 ， 弟 一 个 参数 是 id ， 第 二 个 参数 是 配置 项 ， 目 前 支持 capacity 人 参数， 用 以 设置 
缓存 能 容留 的 最 大 条 目 数 。 超 过 这 个 个 数 ， 则 目 动 清除 较 旧 的 条 目 。 


缓存 实例 的 方法 : 


info() 获取 id , size 信息 
put(k, v) 设置 新 条 目 

get(k) 获取 条 目 

remove(k) MIRR E 
removeAll) 删除 所 有 条 目 
destroy() 删除 对 本 实例 的 引用 


$http 的 调用 当中 ， 有 一 个 cache 参数 ， 值 为 true 时 为 目 动 维护 的 缓存 。 值 也 可 以 设置 
为 一 个 cache 实例 。 


13.3.4988 


$timeout 服务 是 ng 对 window.setTimeout() 的 封装 ， 它 使 用 promise 统一 了 计时 器 的 
回调 行为 : 





使 用 $timeout.cancel() 可 以 取消 计时 器 。 


13.4. 表达 式 画 数 化 


$parse 这 个 服务 ， 为 js 提供 了 类 似 于 Python 中 @property 的 能 





$parse 返回 一 个 函数 ， 调 用 这 个 画 数 时 ， 可 以 传 两 个 参数 ， 第 一 个 作用 域 ， 第 二 个 是 变 
量 集 ， 后 者 常用 于 覆盖 前 者 的 变量 : 





$parse 返回 的 函数 ， 也 提供 了 相应 的 assign 功能 ， 可 以 为 表达 式 赋值 (如果 可 以 的 
if) : 





13.5. 模板 单独 使 用 
ng 中 的 模板 是 很 重要 ， 也 很 强大 的 一 个 机 制 ， 自 然 少 不 了 单独 运用 它 的 方法 。 不 过 ， 即 
使 是 单独 使 用 ， 也 是 和 DOM 紧密 相关 的 程度 : 


oe 定义 时 必须 是 有 HTML 标签 包 应 的 ， 这样 才能 创建 DOM 节点 

o JER Ante A $scope 
之 后 使 用 $compile 就 可 以 得 到 一 个 泻 染 好 的 节点 对 象 了 。 当 然 ，$compile 还 要 做 其 它 
一 些 工 作 ， 指 信义 理 什 么 的 。 


'<p>hello {{ a }}</p>' 





14, 自 定义 模块 和 服务 


14.1. 模块 和 服务 的 概念 与 关系 


总 的 来 说 ， 模 块 是 组 织 业 务 的 一 个 框框 ， 在 一 个 模块 当中 定义 多 个 服务 。 当 你 引入 了 一 
个 模块 的 时 候 ， 融 可 以 使 用 这 个 模块 提供 的 一 种 或 多 种 服务 了 。 


比如 AngularJS 本 身 的 一 个 默认 模块 叫做 ng, CHET $http ， $q 等 等 服务 。 


服务 只 是 模块 提供 的 多 种 机 制 中 的 一 种 ， 其 它 的 还 有 命 分 〈 directive ) ， 过 滤器 (filter 
) ， 及 其 它 配置 信息 。 


然后 在 额外 的 js 文件 中 有 一 个 附加 的 模块 叫做 ngResource ， 它 提供 了 一 个 $resource 
服务 。 


定义 时 ， 我 们 可 以 在 已 有 的 模块 中 新 定义 一 个 服务 ， 也 可 以 先 新 定义 一 个 模块 ， 然 后 在 
新 模块 中 定义 新 服务 。 


使 用 时 ， 模 块 是 需要 显 式 地 的 声明 依赖 (引入) 关系 的 ， 而 服务 则 可 以 让 ng 目 动 地 做 
tA, ARB. 


14.2. 定义 模块 
定义 模块 的 方法 是 使 用 angular.module 。 调 用 时 声明 了 对 其 它 模块 的 依赖 ， 并 定义 
TEILT 


= 'MyModule' 
'here' 


这 段 代 码 定 义 了 一 个 叫做 MyModule 的 模块 ， my_module 这 个 引用 可 以 在 接 下 来 做 
其 它 的 一 些 事 ， 上 比如 定义 服务 。 


14.3. 定义 服务 


服务 本 身 是 一 个 任意 的 对 象 。 但 是 ng 提供 服务 的 过 程 涉及 它 的 依赖 注入 机 制 。 在 这 里 
呢 ， 就 要 先 介 绍 一 下 叫 provider 的 东西 。 


简单 来 说 ， provider 是 被 "注入 控制 器 "使 用 的 一 个 对 象 ， 注 入 机 制 通过 调用 一 个 
provider 的 $get() 方法 ， 把 得 到 的 东西 作为 参数 进行 相关 调用 (比如 把 得 到 的 服务 作为 
一 个 Controller 的 参数 ) 。 


在 这 里 “服务 "的 概念 融 比 较 不 明确 ， 对 使 用 而 言 ， 服 务 仅 指 $get() 方法 返回 的 东西 ， 但 
是 在 整体 机 制 上 ， 服 务 又 要 指 提供 了 $get() 方法 的 整个 对 象 。 


// 这 是 一 个 provider 
this = 
return !'haha': '123' 


// 我 在 模块 的 初始 化 过 程 当 中 ， 定义 了 一 个 叫 PP 的 服务 


= 'Demo' 
'pp! 


//PP 服 务实 际 上 就 是 pp 这 个 provider 的 $get() 方法 返回 的 东西 
'TestCtrl' 





上 面 的 代码 是 一 种 定义 服务 的 方法 ， 当 然 ，ng 还 有 相关 的 Shortcut, ng 总 有 很 多 
shortcut 。 


第 一 个 是 factory 方法 ， 由 $provide 提供 ， module 的 factory 是 一 个 引用 ， 作 用 一 样 。 
这 个 方法 直接 把 一 个 函数 当成 是 一 个 对 象 的 $get() 方法 ， 这 样 你 就 不 用 显 式 地 定义 一 个 
provider 了 : 


return !'hello': ' 


'TestCtrl' 


'Demo' 
return !'abc': '123' 


'TestCtrl' 





第 二 个 是 service 方法 ， 也 是 由 $provide 提供 ， module 中 有 对 它 的 同名 引用 。 service 
和 factory 的 区 别 在 于 ， 前 者 是 要 求 提供 一 个 “构造 方法 ”"， 后 者 是 要 求 提供 $get() 方法 。 
意思 就 是 ， 前 者 一 定 是 得 到 一 个 object ， 后 者 可 以 是 一 个 数字 或 字符 串 。 它 们 的 关 


return {new 





这 里 插 一 句 ，js 中 new AFA, A new a 为 例 ， 过 程 相 当 于 : 


. 创建 一 个 空 对 象 Obj 

. 把 obj REE a AVE FA (Bl a 中 的 this 现在 指向 obj ) 
， 执行 a WR 

芭 回 obj 


service FIA ARLE BT : 


入 WNP 


'pp'! 


= 1123" 


'TestCtrl' 





14.4. 引信 模块 并 使 用 服务 


结合 上 面 的 “定义 模块 "和 "定义 服务 "， 我 们 可 以 方便 地 组 织 目 己 的 额外 代码 : 


'MyModule' 
'S1' 


return 'I am S1' 


152! 
return : return 'I am S2' 


'Demo' 'MyModule' 
'TestCtr1' 





15. 附加 模块 ngResource 


15.1. 使 用 引入 每 整体 概念 


ngResource 这 个 是 ng 官方 提供 的 一 个 附加 模块 。 附 加 的 意思 就 是 ， 如 果 你 打算 用 它 ， 
那么 你 需要 引入 一 人 单独 的 js 文件 ， 然 后 在 声明 “ 根 模 块 " 时 注 明 依赖 的 ngResource & 
块 ， 接 着 就 可 以 使 用 它 提 供 的 $resource 服务 了 。 完 整 的 过 程 形 如 : 
<!DOCTYPE html> 
"Demo" 


WEB 


"text/javascript" 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js&quot; 

"text/javascript" 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource. js&quot; 


"TestCtrl" 


"text/javascript" "utf-8" 


"Demo' "ngResource' 
'TestCtrl' 





$resource 服务 ， 整 体 上 来 说 ， 比 较 像 是 使 用 类 似 ORM HITARTIRTS AJAX 调用 。 
区 别 束 是 ORM 是 操作 数据 库 ， 即 拼 出 SQL 语句 之 后 ， 作 execute 方法 调用 。 而 
$resource 的 方式 是 构造 出 AJAX 请 求 ， 然 后 发 出 请 求 。 同 时 ，AJAX 请 求 是 需要 回调 
处 理 的 ， 这 方面 ， $resource 的 机 制 可 以 使 你 在 一 些 时 候 省 挥 回调 人 处理， 当然 ， 是 否 作 
回调 处 理 在 于 业务 情形 及 容错 需求 了 。 


使 用 上 $resource 分 成 了 "类 "与 "实例 "这 两 个 屋面。 一般 地 ， 类 的 方法 调用 融 是 下 观 的 调 
用 形式 ， 通 常会 返回 一 个 对 象 ， 这 个 对 象 即 为 “实例 ”。 


“实例 " 贯 罕 整个 服务 的 使 用 过 程 。 “实例 "的 效 据 是 填充 方式 ， 即 因为 异步 关系， 回调 函数 
没有 执行 时 ， 实 例 已 经 存在 ， 只 是 可 能 它 还 没有 相 天 数据 ， 回 调 执 行 之 后 ， 相 关 数 据 被 
填充 到 实例 对 象 当中 。 实 例 的 方法 一 般 束 是 在 类 方法 名 前 加 一 个 $， 调 用 上 ， 根 据 定 
义 ， 实 例 数据 可 能 会 做 一 些 目 动 的 参数 十 充 ， 这 点 是 区 别 实例 与 类 的 调用 上 的 不 同 。 


好 吧 ， 上 面 这 些 话 可 能 需要 在 看 了 接 下 来 的 内 容 之 后 再 回 过 来 理解 。 


15.2. 基本 定义 


RIEF ORM 一 般 要 先 定 义 Model 一 样 ， 使 用 $resource BEIEL AM, Bre 
先 定义 一 些 HTTP 请 求 。 


在 业务 场景 上 ， 我 们 假设 为 ， 我 们 需要 操作 " 书 " 这 个 实体 ， 包 括 创 建 create， 获 取 详 情 
read， 修 改 update， 删 除 delete， 批 量 获 取 multi， 共 五 个 操作 方法 。 实 体 属性 有 : 唯一 
标识 id， 标 题 title， 作 者 author。 
我 们 把 这 些 操作 定义 成 $resource 的 资源 : 
'Demo' 'ngResource' 
'BookCtr1' 
'POST' 


"POST" 
POST’ 


delete: : 'POST' 
: : 'POST' 


'/book' 





定义 是 使 用 使 用 Sresource XT MWAMALST, CHR=TESR : 


e url 

e 默认 的 params (这 里 的 params 即 是 GET 请 求 的 参数 ，POST 的 参数 单独 叫 
做 “postData”) 

。 方法 映射 


方法 映射 是 以 方法 名 为 key ， 以 一 个 对 象 为 value ， 这 个 value 可 以 有 三 个 成 员 : 


e method, 请 求 方法 ，'GET', 'POST', 'PUT', 'DELETE' 这 些 
e params, 默认 的 GET 参数 
。 isArray, 返回 的 数据 是 不 是 一 个 列表 


15.3. 基本 使 用 
在 定义 了 资源 之 后 ， 我 们 看 如 果 使 用 这 些 资源 ， 发 出 请 求 : 


= TELT? 


这 里 我 们 进行 Book 的 “类 "方法 调用 。 在 方法 的 使 用 上 ， 根 据 官方 文档 : 





我 们 这 里 是 第 二 种 形式 ， 即 类 方法 的 非 GET 请 求 。 我 们 给 的 参数 会 作为 ”postData % 
递 。 如 果 我 们 需要 GET 参数 ， 并 且 还 需要 一 个 错误 回调 ， 那 么 : 





调用 之 后 ， 我 们 会 立即 得 到 的 book ， 它 是 a en 这 里 所 谓 的 实例 ， 实 
际 上 就 是 先 把 所 有 的 action 加 一 个 $ 前 级 放 到 一 个 空 对 象 里 ， 然 后 把 发 出 的 参数 填充 进 
去 。 等 请 求 返 回 了 ， 把 除 action dodi nde 再 把 请 求 返回 的 数据 填充 到 这 个 对 
象 当 中 。 所 以 ， 如 果 我 们 这 


= re 


RAGS =e! book 实例 的 变化 过 程 了 。 
现在 我 们 得 到 一 个 真实 的 实例 ， 看 一 下 实例 的 调用 过 程 : 


// 响 应 的 数据 是 {result: 0, msg: '', obj: {id: 'xxx'}} 


测试 标题 ， : ' 测 试 作者 ' 





可 以 看 到 ， 在 请 求 回 调 之 后 ， book 这 个 实例 的 成 员 已 经 人 逢 响应 内 容 填 序 了 。 但 是 这 
里 有 一 个 问题 ， 我 们 返回 的 数据 ， 并 不 适合 一 个 book 实例 。 格 式 先 不 说 ， EM 
title 和 author #02 RAs Ss ag 返回 了 id ) 。 


如 果 仅 仅 是 格式 问题 ， 我 们 可 以 通过 配置 $http 服务 来 解决 (AJAX 请 求 都 要 使 用 $http 
服务 的 ) 


= return 


当然 ， 我 们 也 可 以 目 己 来 解决 一 下 去 信息 的 问题 : 


: “测试 标题 : “测试 作者 ' 





不 过 ， 始 终 会 有 一 些 不 方便 了 。 比 较 正 统 的 方式 应 该 是 调节 服务 器 端的 响应 ， 让 服务 器 
靖 也 具有 和 前 痕 一 样 的 实例 概念 ， 返 回 的 是 完整 的 实例 信息 。 即 使 这 样 ， 你 也 还 要 考虑 
格式 的 事 。 

现在 我 们 得 到 了 一 个 真实 的 book RPS, WA id 信息 。 我 们 尝试 一 下 实例 的 方法 
调用 ， 先 回 过 去 头 看 一 下 那 三 种 调用 形式 ， 对 于 实例 只 有 第 三 种 形式 : 


EE 


站 先 解 决 一 个 疑问 ， 如 果 一 个 实例 是 进行 一 个 GET 的 调用 会 怎么 样 ?没有 任何 问题 ， 
这 当然 没有 任何 问题 的 ， 形 式 和 和 上面 一 样 。 


如 何 实例 是 做 POST 请 求 的 话 ， 从 形式 上 看 ， 我 们 无 法 控制 请 求 的 postData ? 是 的 ， 
所 有 的 POST 请 求 ， 其 postData 都 会 被 实例 数据 目 动 填充 ， 形 式 上 我 们 只 能 控制 
params 。 


所 以 ， 如 果 是 在 做 修改 调用 的 话 : 


: ' 新 标题 ' : ' 测 试 作 者 ' 





这 样 是 没有 意义 的 并 且 错 误 的 。 因 为 要 修改 的 数据 只 是 作为 GET 参数 传递 了 ， 而 
postData 传递 的 数据 就 是 当前 实例 的 数据 ， 并 没有 任何 修改 。 


正确 的 做 法 : 


= “新 标题 ， 


显然 ， 这 种 情况 下 ， 回 调 都 可 以 省 了 : 


= “新 标题 ， 


15.4. 定义 和 使 用 时 的 占 位 量 


两 方面 。 一 是 在 定义 时 ， 在 其 URL 中 可 以 使 用 变量 引用 的 形式 〈 类 型 于 定义 锚 点 路 由 时 
那样 ) 。 第 二 时 定义 默认 params, BI GET 参数 时 ， 可 以 定义 为 引用 postData 中 的 某 
变量 。 比 如 我 们 这 样 改 一 下 : 


'/book/:id' 
123: 





在 URL 中 有 一 个 :id ， 表 示 对 params id 这 个 变量 的 引用 。 因 为 read 是 一 
个 POST 请 求 ， 根 据 调用 形式 ， 弟 一 个 参数 是 params ， 第 二 个 参数 是 postData 。 这 
样 的 调用 结果 就 是 ， 我 们 会 发 一 个 POST 请 求 到 如 下 地 址 ， postData 为 空 : 


E a 


再 看 默认 的 params 中 引用 postData 变量 的 形式 : 





这 样 会 出 一 个 POST 请 求 ， postData 内 容 中 有 一 个 id 数据 ， 访 问 的 URL Æ: 


E 


这 两 个 机 制 也 可 以 联合 使 用 : 


'/book/:id' 
er 





结果 就 是 出 一 个 POST 请 求 ， postData 内 容 中 有 一 个 id 数据 ， 访 问 的 URL 是: 


| 


15.5. 实例 


ngResource 2A—T SPERMS AIEHAE-TEMRRE, KBR 
我 用 Python & 写 一 个 简单 的 后 病 ， 估 计 要 让 这 个 后 病 跑 起 来 对 很 多 人 来 说 都 是 问题 。 所 
以 ， 我 在 几 套 公共 服务 的 API 中 纠结 考察 了 一 番 ， 最 后 使 用 
www.rememberthemilk.com 的 API 来 做 了 一 个 简单 的 ， 可 用 的 例子 。 


例子 见 : http://zouyesheng.com/demo/ng-resource-demo.html (可 以 直接 下 载 看 源码 ) 


先 说 一 下 API 的 情况 。 这 里 的 请 求 调用 全 是 跨 域 的 ， 所 以 交互 上 全 部 是 使 用 了 JSONP 
的 形式 。 API 的 使 用 有 使 用 签名 认证 机 制 ， 吧 ， js PERS md5 是 可 行 的， 我 用 了 一 
个 现成 的 库 (但 是 好 像 不 能 处 理 中 文 吧 ) 。 


这 个 例子 中 的 LoginCtrl 大 家 束 不 用 太 关 心 了 ， 参见 官方 的 文档 ， 走 完 流程 拿 到 
token 完事 。 与 ngResource 相关 的 是 Mainctrl 中 的 东西 。 


其 实 从 这 个 例子 中 就 可 以 看 出 ， 目 前 ngResource 的 机 制 对 于 服务 端 返回 的 数据 的 格式 

是 严重 依赖 的 ， 同 时 也 可 以 反映 出 $http 对 一 些 场景 根本 无 法 应 对 的 局 限 。 所 以 ， 我 现 

FEB AE seiner ngResource 的 思想 ， 真 正 需 要 的 人 目 己 使 用 jQuery 重新 实现 一 通 也 许 
更 好 。 这 应 该 也 花 不 了 多 少时 间 ， ngResource 的 代码 本 来 不 多 。 


我 为 什么 说 $http 在 一 些 场景 中 有 局 限 呢 。 在 这 个 例子 当中 ， 所 有 的 请 求 都 需要 带 一 个 
签名 ， 签 名 值 是 由 请 求 中 带 的 参数 根据 规则 使 用 md5 方法 计算 出 的 值 。 我 找 不 到 一 个 
hook 可 以 让 我 在 请 求 出 去 之 前 修改 这 个 请 求 〈 添 加 上 签名 ) 。 所 以 在 这 个 例子 当中 ， 我 
的 做 法 是 根据 ngResource 的 请 求 最 后 会 使 用 $httpBackend 这 个 底层 服务 ， 在 module 
定义 时 我 自己 复制 官方 的 相关 代码 ， 重 新 定义 $httpBackend 服务 ， 在 需要 的 地 方 做 我 
自己 的 修改 : 


| 


Th, RMATA, BERTET T 50 行 官方 源码 到 我 的 例子 中 。 


另外 一 个 需要 说 的 是 对 返回 数据 的 处 理 。 因 为 ngResource 会 使 用 返回 的 数据 直接 填充 
实例 ， 所 以 这 个 数据 格式 融 很 重要 。 


首先 ， 我 们 可 以 使 用 $http.defaults.transformResponse 来 统一 义理 一 下 返回 的 数 
据 ， 但 是 这 并 不 能 解决 所 有 问题 ， 可 目前 ngResource 并 不 提供 对 每 一 个 action 的 单独 
的 后 处理 回调 酌 效 项 。 除 非 你 的 服务 闯 是 经 过 专门 的 适应 性 设计 的 ， 否 则 你 用 
ngResource 不 可 能 歌 。 例 子 中 ， 我 为 了 获取 当前 列表 的 结果 ， 我 不 得 不 自己 去 封装 





while > 0 


return 








16. AngularISS E a (jQuery, Dojo) 


这 个 问题 似乎 很 多 人 都 和 天心， 但 是 事实 是 ， 如 果 了 解 了 ng hHLrAn, KAKRMKE 
—T je] A LS o 


在 我 自己 使 用 ng 的 过 程 当 中 ， 一 直 是 混用 jQuery 的 ， 以 前 还 要 加 上 一 个 Dojo 。 只 要 
了 解 每 种 框架 的 工作 方式 ， 在 具体 的 代码 中 每 个 框架 都 做 了 什么 事 ， 那 么 整体 上 控制 起 
来 就 不 会 有 问题 。 


回 到 ng 上 来 看 ， 首 先 对 于 jQuery 来 说 ， 最 开始 说 提 到 过 ， 在 DOM 操作 部 分 ， ng 与 
jQuery 是 兼容 的 ， 如 果 没 有 jQuery, ng 自己 也 实现 了 兼容 的 部 分 API 。 





同时 ， 最 开始 也 提 到 过 ， ng 的 使 用 最 忌讳 的 一 点 束 是 修改 DOM 结构 你 应 该 使 用 
ng 的 模板 机 制 进行 数据 绑 定 ， 以 此 来 控制 DOM 结构 ， 而 不 是 直接 操作 。 换 句 话 来 说 ， 
在 不 动 DOM 结构 的 这 个 前 提 之 下 ， 你 的 数据 随便 怎么 改 ， 随 便 使 用 哪个 框架 来 控制 都 
是 没 问 题 的 ， 到 时 如 有 必要 使 用 $scope.$digest() 来 通知 ng 一 下 即 可 。 


下 面 这 个 例子 ， 我 们 使 用 了 jQuery 中 的 Deferred ( $.ajax 就 是 返回 一 个 Deferred 
)， 还 使 用 了 ng 的 $timeout ， 当 然 是 在 ng 的 结构 之 下 : 
<!DOCTYPE html> 

"Demo" 


Thee pea 


CONOOBRWNE 


9 "TestCtril" 
10 "go()" 


13 "text/javascript" 
14 "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot; 
16 "text/javascript" 


17 "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js&quot; 


20 "text/javascript" 
24 = 'Demo' 
22 'TestCtrl' 

23 = "点 击 我 开始 ' 


27 Ir == = ' 已 停止 '; return 


29 < 10 ? ot v2: = '>! 


37 = i! 5000 


41 
42 
再 把 Dojo 加 进来 看 与 DOM 结构 相关 的 例子 。 之 前 说 过 ， 使 用 ng 融 最 好 不 要 手动 修改 
DOM 结构 ， 但 这 里 说 两 点 : 


Fa 


NO OBWNE 


1， 对 于 整个 页 面 ， 你 可 以 只 在 局 部 使 用 ng, MEA ng 的 地 方 你 可 以 随意 控制 


DOM. 


2. 如 果 DOM 结构 有 变动 ， 你 可 以 在 DOM 结构 定 下 来 之 后 再 初始 化 ng. 


这 个 例子 使 用 了 AngularJS ， jQuery, Dojo 


<!DOCTYPE html> 


"utf-8" 
"stylesheet" 


"http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css&quot; 
"screen" 


"claro" 
"TestCtrl" "test_ctrl" 


"I btn_disable" 


"change()" 
"btn_wrapper" 
"dijit/form/Button" "button" 
"dialog text" "dialog_text=' 对话 框 内 容 '" 


"dialog(dialog_text)" 


"show_edit_text" "display: none;" 


"text" 


"editor_wrapper" 
"“d1ijit/Edłitor" "editor" 


"text/javascript" 
"http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js&quot; 


"text/javascript" 
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot; 


"text/javascript" 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js&quot; 


"text/javascript" 


'dojo/parser', 'dijit/Editor' 
'#editor_wrapper') 0 
= 'Demo' 


'TestCtrl' 
= “我 是 ng， 也 是 dojo: 
= true 


Sl 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
ral 
72 
73 
74 
is: 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
gr 
92 
93 
94 
95 


= "DOM 结 构 已 经 改变 (不 建议 这 样 做 )， 
'dojo/parser' "'dijit/form/Button' 


'#btn_wrapper' 0 
= true 


"dijit/Dialog" "dojo/domReady!" 
= new 
" a 5g AED" 


"width: 300px" 


'dijit/registry' 
= ‘editor' 
‘text ' 


'Demo' 


'dojo/domReady!' 





先 来 回顾 一 下 ng 中 的 一 些 概念 : 


module ， 代 码 的 组 织 单元 ， 其 它 东 西 都 是 在 定义 在 具体 的 模块 中 的 。 

app ， 业 务 概念 ， 可 能 会 用 到 多 个 模块 。 

service ， 仅 在 效 据 层 面 实 现 特定 业务 功能 的 代码 封 委 

controller, $ DOM 结构 相关 联 的 东西 ， 即 是 一 种 业务 封装 志 概 念 ， 又 体现 了 
项 目 组 织 的 层级 结构 。 

filter ， 改 变 输 入 数据 的 一 种 机 制 。 

directive ， 与 DOM 结构 相 天 联 的 ， 特 定 功能 的 封 委 形式 。 


上 面 的 这 几 个 概念 基本 上 就是 ng 的 全 部 。 每 一 部 分 都 可 以 目 由 定义 ， 使 用 时 通过 各 要 
素 的 相互 配合 来 实现 我 们 的 业务 需求 。 


我 们 从 最 开始 一 致 打交道 的 东西 基本 上 都 是 controller 层面 的 东西 。 在 前 面 ， 也 介绍 
module 和 service ABEL. RI FANA filter 和 directive 的 定义 。 基 本 上 这 几 部 分 
的 定义 形式 都 是 一 样 的 ， 原 理 上 是 通过 provider 来 做 注入 形式 的 声明 ， 在 实际 操作 
过 程 中 ， 又 有 很 多 shortcut 式 的 声明 方式 。 


过 滤器 的 自 定 义 是 最 简单 的 ， 融 是 一 个 国 数 ， 接 受 输入 ， 然 后 返回 结果 。 在 考虑 过 
时 ， 我 觉得 很 重要 的 一 点 : 无 状态 。 


具体 来 说 ， 过 滤器 束 是 一 个 阔 数 ， 函 数 的 本 质 含义 束 是 确定 的 输入 一 定 得 到 确定 的 输 
Ho BR filter 是 定义 在 module 当中 的 ， 而 且 filter 又 是 在 controller 的 DOM 范围 内 使 
用 的 ， 但 是 ， 它 和 具体 的 module, controller, scope 这 些 概念 都 没有 关系 (虽然 在 
这 里 你 可 以 使 用 js 的 闭 包 机 制 玩 些 花 样 ) ， 它 仅仅 是 一 个 图 数 ， 而 已 。 换 句 话 说 ， 它 没 
有 任何 上 下 文 天 联 的 能 力 。 


过 滤器 基本 的 定义 方式 : 


return 


return 





上 面 的 代码 定义 了 一 个 叫做 map 的 过 滤器 。 使 用 时 : 


| 


过 滤 絮 也 可 以 带 参数 ， 多 个 参数 之 间 使 用 : 分 割 ， 看 一 个 完整 的 例子 : 





="TestCtrl's 


> : | : pee. (D0): < 
> | i dien < 


ORODP 
IN: ANC IS AN 


="text/javascript"> 


'TestCtr1' 


IT === undefined 
else return + 


return 


'Demo' 


return 


'Demo' 


18. Bt Lis Ddirective 
这 是 ng 最 强大 的 一 部 分 ， 也 是 最 复杂 最 让 人 头疼 的 部 分 。 


目前 我 们 看 到 的 所 谓 “ 模 板 " 系 统 ， 只 不 过 是 官方 实现 的 几 个 指 合 而已。 这 意味 着 ， 通 过 
和 目 定义 各 种 指令 ， 我 们 不 但 可 以 完全 定义 一 套 “ 模 板 " 有 系统 ， 更 可 以 把 HTML 页 面 下 接 打 
造成 为 一 种 DSL (领域 特定 语言 ) 。 


18.1. 指令 的 使 用 
使 用 指令 时 ， 它 的 名 字 可 以 有 多 种 形式 ， 把 指令 放 在 什么 地 方 也 有 多 种 选择 。 


通常 ， 指 使 的 定义 名 是 形 如 ngBind 这 样 的 “camel cased’ 形式。 在 使 用 时 ， 它 的 引用 


e ng:bind 

e ng bind 

e ng-bind 

e x-ng-bind 

e data-ng-bind 


你 可 以 根据 你 自己 是 否 有 “HTML validator” SERHH, 
中 邻 可 以 放 在 多 个 地 方 ， 它 们 的 作用 相同 : 


e <span my-dir="exp"></span> 作为 标签 的 属性 

e <span class="my-dir: exp;"></span> 作为 标签 类 属性 的 值 
e <my-dir></my-dir> 作为 标签 

e <!-- directive: my-dir exp --> 作为 注释 


这 些 方 式 可 以 使 用 指令 定义 中 的 restrict 属性 来 控制 。 


可 以 看 出 ， 指 令 即 可 以 作为 标签 使 用 ， 也 可 以 作为 属性 使 用 。 仔 细 考 虑 一 下 ， 这 在 类 
XML 的 结构 当中 真 算 得 上 是 一 种 神奇 的 机 制 |。 


18.2. 指令 的 执行 过 程 
ng 中 对 指令 的 解析 与 执行 过 程 是 这 样 的 : 


e 浏览 器 得 到 HTML 字符 串 内 容 ， 解 析 得 到 DOM 结构 。 

e ng 引入 ， 把 DOM 结构 扔 给 $compile KJAK : 
o RHE DOM 结构 中 有 变量 占 位 符 

匹配 找 出 DOM 中 包含 的 所 有 指使 引用 


o 把 指 分 天 联 到 DOM 

o 关联 到 DOM 的 多 个 指令 按 权 重 排列 

o 执行 指令 中 的 compile KM (改变 DOM 4%, WE] link BW 
数 ) 

o 得 到 的 所 有 link 阔 数 组 成 一 个 列表 作为 $compile EX LAR 
口 | 


e 执行 link RN (连接 模板 的 scope ) o 


18.3. 基本 的 自 定义 方法 


自 定义 一 个 指 命 可 以 非常 非常 的 复杂 ， 但 是 其 基本 的 调用 形式 ， 同 自 定 义 服务 大 概 是 相 
同 的 : 


="font-size: 12px;">< 


="text/javascript"> 


'Demo' 


return 
//return {compile: function(){return func}} 


'Demo' 





如 果 在 directive 中 直接 返回 一 个 函数 ， 则 这 个 函数 会 作为 ”compile 的 返回 值 ， 也 
即 是 作为 ”1Link RAVER, BAY compile 和 link 都 是 一 个 指令 的 组 成 部 分 ， 
一 个 完整 的 定义 应 该 返回 一 个 对 象 ， 这 个 对 象 包括 了 多 个 属性 : 


e name 

e priority 

e terminal 

e scope 
controller 
e require 

e restrict 

e template 
e templateUrl 
e replace 

e transclude 
e compile 

e link 


上 面 的 每 一 个 属性 ， 都 可 以 单独 探讨 的 。 


下 面 是 一 个 完整 的 基本 的 指 分 定义 例子 : 


= 'Demo' 


'code' 


OMONDOABRWNE 


// 处 理 首尾 空白 
10 it 0] == '' = 1 - 1 
ils if -1] == '' = 0 - 1 


15 // 处 理 外 框 


17 ‘Clear’, 'both' 

18 "display, block: 

19 'line-height', '20px' 
20 'height', '200px' 


23 // 是 人 否 显 示 行 号 的 选项 

24 if('lines' in 

25 // 处 理 行 号 

27 = '<div style="width: %spx; background-color: gray; float: left; 
text-align: right; padding-right: 5px; margin-right: 10px;"></div>' 

28 '%S ' Be 

29 = tt 


31 += '<pre style="margin: 0;">%s</pre>\n' '%S | ik 


38 // RENE 


D 
© 
=l 


'<div style="float: left;"></div>' 


43 += '<span style="margin: 0;">%s</span><br />\n' '%S | 
/\s/g, '<span>&nbsp;</span>' 


50 return 


51 HE ”// 以 元 素 或 属性 的 形式 使 用 命令 
54 'Demo' 


LEXTHBEXNES, WSE  RAHXMAAA, AMEN, SEER 
NAMA PAARA. HARRI PRB lines NAH RAST 


Bx fe} BAY - HER, AA Ce RIES”, Pa RAR SNR, OMAR AR 
的 文本 内 容 是 一 个 变 旺 引用， 类似 于 {{ code }} , ARLMNNSMAIST. RMT 
MINES. MBit. 


18.4. 局 性 值 类 型 的 自 定 义 


官方 代码 中 的 ng-show 等 算是 我 说 的 这 种 类 型 。 使 用 时 主要 是 在 节 氮 加 添加 一 个 属性 
值 以 附加 额外 的 功能 。 看 一 个 简单 的 例子 : 


el 
W red" 


"text/javascript" 


' Demo ' 


return 





我 们 定义 了 一 个 叫 color 的 指令 ， 可 以 指定 节点 文本 的 颜色 。 但 是 这 个 例子 还 无 法 像 
ng-show 那样 工作 的 ， 这 个 例子 只 能 泻 染 一 次 ， 然 后 束 无 法 根据 变量 来 重新 改变 显示 
了 。 要 响应 变化 ， 我 们 需要 手工 使 用 scope 的 $watch 来 处 理 : 


"TestCtrl" 
"Color. 
IT I blue' nm 


"text/javascript" 


oOoOSOVIPODNMKH 


'Demo' 


ewan 


'TestCtrl' 
= 'red' 





18.5. Compile) 4a 7 


指使 的 处 理 过 程 ， 是 ng 的 Compile 过 程 的 一 部 分 ， 它 们 也 是 紧密 联系 的 。 继 续 深 入 指 
SHELA, SAME Compile 的 过 程 做 更 细致 的 了 解 。 


前 面 说 过 ， ng 对 页 面 的 处理 过 程 : 


e 浏览 器 把 HTML 字符 串 解 析 成 DOM 结构 。 

e ng 把 DOM 结构 给 $compile ， 返 回 一 个 link WR. 
oe 传人 具体 的 scope 调用 这 个 link WR, 

。 得 到 处 理 后 的 DOM ， 这 个 DOM AETH, 2 7 BE. 


$compile 最 基本 的 使 用 方式 : 


上 面 的 $compile 和 link 调用 时 都 有 额外 参数 来 实现 其 它 功 能 。 先 看 link W 
ZN, TR: 


| 


第 二 个 参数 cloneAttachFn 的 作用 是 ， 表 明 是 否 复制 原始 节点 ， 及 对 复制 节点 需要 做 
的 处 理 ， 下 面 这 个 例子 说 明了 它 的 作用 : 


"TestCtrl" 


'TestCtrl' 
IHAN 


/V/true 参 数 表示 新 建 一 个 完全 隔离 的 scope, 而 不 是 继承 的 child scope 
= true 


= '12345' 


//var node = link(scope, function(){}); 


VED. 





cloneAttachFn 对 节点 的 处 理 是 有 限制 的 ， 你 可 以 添加 class ， 但 是 不 能 做 与 数据 
绑 定 有 天 的 其 它 修改 (修改 了 也 无 效 ) 





'TestCtrl' 
= '#a' 
= true 
= 712245. 


+ 1... // 无 效 
"S$ text2 }}'); 无效 
'new_class' 


ae 


修改 无 效 的 原因 是 ， 像 {{ text }} 这 种 所 谓 的 Interpolate Œ $compile 中 已 经 被 处 
iP T, ER TERN (这 里 起 作用 的 是 directive 中 的 一 个 postLink & 
数 ) ， 后 面 执 行 link MEHITTS $compile 生成 的 这 些 函 数 。 当 然 ， 如 果 你 的 文本 


没有 数据 变量 的 引用 ， 那 修改 是 会 有 效果 的 。 
前 面 在 说 自 定 义 指 合 时 说 过 ， link WBA compile KUREK, EMRA A 
的 ， 应 该 把 改变 DOM 结构 的 逻辑 放 在 compile KAH 


$compile 还 有 两 个 额外 的 参数 : 


| 


maxPriority 是 指 合 的 权重 限制 ， 这 个 容易 理解 ， 后 面 骨 说 。 


transclude 是 一 个 琅 数 ， 这 个 图 数 会 传递 给 compile 期 间 找 到 的 directive 的 
compile 落 数 (编译 节点 的 过 程 中 找到 了 指 合 ， 指 命 的 compile 阔 数 会 接受 编译 时 
传递 的 transclude 图 数 作为 其 参数 ) 。 


但 是 在 实际 使 用 中 ， 除 我 们 手工 在 调用 $compile 之 处 ， 初 始 化 时 的 根 节 点 compile 
是 不 会 传递 这 个 参数 的 。 


在 我 们 定义 指 合 时 ， 它 的 compile 加 数 是 这 个 样子 的 : 


| 


事实 上 ， transclude BY, Me directive 所 在 的 原始 节点 ， 把 原始 节点 重新 做 
了 编译 之 后 得 到 的 link RA (需要 directive 定义 时 使 用 transclude 选项 ) , 
后 面 会 专门 演示 这 个 过 程 。 所 以 ， 官 方 文档 上 也 把 transclude — link & 
数 的 样子 〈 如 果 自 定义 的 指令 只 用 在 自己 手动 $compile 的 环境 中 ， 那 这 个 函数 的 形 
式 是 可 以 随意 的 ) 


| 


所 以 记 住 ， 定义 指令 时 ， compile 加 数 的 第 三 个 参数 transclude , Me-T 
link , ÆA scope 执行 它 你 束 得 到 了 一 个 节点 。 


18.6. transclude 的 细节 


transclude 有 两 方面 的 东西 ， 一 个 是 使 用 $compile 时 传人 的 函数 ， 另 一 个 是 定义 
DAJ compile 图 数 时 接受 的 一 个 参数 。 虽 然 这 里 的 一 出 一 进 本 来 是 相互 对 应 的 ， 但 
是 实际 使 用 中 ， 因 为 大 部 分 时 候 不 会 手动 调用 Scompile ， 所 以 ， 在 “默认 "情况 下 ， 指 
Dx transclude 又 会 是 一 个 比较 特殊 的 函数 。 


看 一 个 基本 的 例子 : 


return 


2 'E! 


'TestCtr1' 
= '<more>123</more>' 
return + 





我 们 定义 了 一 个 more 83, CH compile KAUNFZETSU MERFI 
$compile 时 传人 的 。 


如 果 不 是 手工 $comile ， 而 是 ng 初始 化 时 找 出 的 指 爷 ， 则 transclude 是 一 个 
link KWA ( 指 命定 义 需 要 设置 transclude 选项 ) 


'more' // 不 去 掉 就 变 死 循环 了 
' body ' 


return 


'element', // element 是 节点 没 , 其 它 值 是 节点 的 内 容 ; 
: LAS 





18.7. 把 节点 内 容 作 为 变量 处 理 的 类 型 


回顾 最 开始 的 那个 代码 显示 的 例子 ， 那 个 例子 只 能 处 理 一 次 节点 内 容 。 如 果 节 点 的 内 容 
是 一 个 变量 的 话 ， 需 要 用 另外 的 思路 来 考虑 。 这 里 我 们 假设 的 例子 是 ， 定 义 一 个 指 全 
showLenght ， 它 的 作用 是 在 一 段 文 本 的 开头 显示 出 这 段 节 点 文本 的 长 度 ， 节 点 文本 是 


一 个 变量 。 指 今 使 用 的 形式 是 : 


TesStECEr LY 


“text= xx" 





从 上 面 的 HTML 代码 中 ， 大 概 清 楚 ng 解析 它 的 过 程 (只 看 show-length 那 一 行 ) 


oe 解析 div 时 发 现 了 一 个 show-length WIET. 

oe 如 果 show-length 指令 设置 了 transclude 属性 ， 则 div 的 节点 内 容 
被 重新 编译 ， 得 到 的 link 阔 数 作为 指 合 compile 加 数 的 参数 传人。 

oe 如 果 show-length 指令 没有 设置 transclude 属性 ， 则 继续 义理 它 的 子 节 
点 ( TextNode ) o 

。 不 管 是 上 面 的 哪 种 情况 ， 都 会 继续 处 理 到 {{ tet }} 这 段 文 本 。 

eo 发 现 {{ text }} 是 一 个 Interpolate ， 于 是 目 动 在 此 节点 中 添加 了 一 个 
指令， 这 个 指令 的 link KAMEA scope 添加 了 一 个 Swatch ， 实 现 
的 功能 是 是 当 scope fF $digest 的 时 候 ， 束 更 新 节点 文本 。 


与 处 理 {{ text }} 时 添加 的 指令 相 同 ， 我 们 实现 showLength WAR, Wwe : 


。 修改 原来 的 DOM 结构 
e 为 scope 添加 swatch , 4 $digest 时 修改 指定 节点 的 文本 ， 其 值 为 
指定 节点 文本 的 长 度 。 


代码 如 下 : 


'showLength' 


return 


= '<span></span>' 


return 


: true // element 是 节点 ; 
A 





上 面 代 码 中 ， 因 为 设置 了 transclude 属性 ， 我 们 在 showLength 的 link WRX 


(就 是 return 的 那个 函数 ) 中 ， 使 用 fun 的 第 三 个 函数 来 重 塑 了 原来 的 文本 节 
点 ， 并 放 在 我 们 需要 的 位 置 上 。 然 后 ， 我 们 添加 自己 的 节点 来 显示 长 度 值 。 最 后 给 当前 
的 scope 添加 gwatch ， 以 更 新 这 个 长 度 值 。 


18.8. 指 命定 义 时 的 参数 


指令 定义 时 的 参 效 如 下 : 


e name 
e priority 

e terminal 

e scope 

e controller 
e require 

e restrict 

e template 

e templateUrl 
e replace 

e transclude 
e compile 

e link 


现在 我 们 开始 一 个 一 个 地 吃 掉 它 们 ..….…. ， 但 是 并 不 是 按 顺序 讲 的 。 


| priority 
这 个 值 设置 指 倒 的 权重 ， 默 认 是 0 。 当 一 个 节点 中 有 多 个 指使 存 在 时 ， 就 按 着 权限 从 大 到 小 的 顺序 依次 执 
行 它们 的 ”compile 部 数 。 相 同 权重 顺序 不 定 。 


| terminal 


是 否 以 当前 指使 的 权重 为 结束 界限 。 如 果 这 值 设 置 为 ”true ， 则 节点 中 权重 小 于 当前 指 合 的 其 它 指 命 不 会 被 
执行 。 相 同 权 重 的 会 执行 。 


| restrict 


指 合 可 以 以 哪些 方式 被 使 用 ， 可 以 同时 定义 多 种 方式 。 
e E JRA <my-directive></my-directive> 
e 人 属性 方式 <div my-directive="exp"> </div> 
e C 类 方式 <div class="my-directive: exp;"></div> 


e M 注释 方式 <!-- directive: my-directive exp --> 


| transclude 


前 面 已 经 讲 过 基本 的 用 法 了 。 可 以 是 'element' 或 true 两 种 值 。 


[ compile 
基本 的 定义 函数 。 function compile(tElement, tAttrs, transclude) { ... } 
[ink 
前 面 介 绍 过 了 。 大 多 数 时 候 我 们 不 需要 单独 定义 它 。 只 有 compile REIN link 才 会 被 党 试 。 
function link(scope, iElement, iAttrs, controller) { ... } 
| scope 


scope 的 形式 。 false 节点 的 Scope, true 继承 创建 一 个 新 的 scope, 0 不 继承 创建 一 个 新 的 隔离 
scope. {@attr: ' 引 用 节点 属性 '，=attr: ' 把 节点 属性 值 引 用 成 scope 属 性 值 '，&attr: ' 把 节点 属性 值 包装 成 画 数 '} 


| controller 


为 指令 定义 一 个 controller ， function controller($scope, $element, $attrs, $transclude) { ... } 


| name 


虽 今 的 controller 的 名 字 ， 方 便 其 它 指 使 引用 。 


| require 


要 引用 的 其 它 指 令 conroller 的 名 字 ， 2name 忽略 不 存在 的 错误 ， Aname 在 父 级 查找 。 


| template 
模板 内 容 。 


| templateUrl 
从 指定 地 址 获取 模板 内 容 。 


| replace 


是 否 使 用 模板 内 容 蔡 换 掉 整 个 节 点 ， true 蔡 换 整个 a Wy false Sie 点 内 容 。 


return 


return 
2 
//terminal: true, 
FAN 





上 面 几 个 参数 值 都 是 比较 简单 且 容 易 理 想 的 。 
再 看 scope 这 个 参数 : 


"TestCtrl" 





1 = ' Demo ' 
2 
3 'a' 
4 = 
5 return 
6 
i 
8 
9 
10 return : 
1% : true 
12 a 


17 return 


22 return : 
23 TA 


26 'TestCtrl' 
27 zer J23. 





对 于 scope : 


e 默认 为 ”false , link WARS scope 为 节点 所 在 的 scope o 
e 4 true 时 ， 则 link HAPRB—-TSRA (还 有 controller 参数 中 的 


$scope ) , scope 是 节点 所 在 的 scope 的 child ， 并且 如 果 
节点 中 有 多 个 指 爷 ， 则 只 要 其 中 一 个 指 全 是 true 的 设置 ， 其 它 所 有 指 DAB 
会 受 影 响 。 


这 个 参数 还 有 其 它 取 值 。 当 其 为 {} 时 ， 则 link 接受 一 个 完全 隔离 (isolate) 的 
scope , F true 的 区 别 融 是 不 会 继承 其 它 scope 的 属性 。 但 是 这 时 ， 这 个 
scope 的 属性 却 可 以 有 很 灵活 的 定义 方式 : 


@attr 引用 节点 的 属性 。 


"TestCtrl" 
"here" i a Er" reece! 


return 


return 


'TestCtrl' 
122: 





e @abc 引用 div 节点 的 abc 属性 。 

e @xx 引用 div 节点 的 xx 属性 ， 而 xx 属性 又 是 一 个 变量 绑 定 ， 于 是 scope 
中 b 属性 值 就 和 Testctrl 的 a 交 量 绑 定 在 一 起 了 。 

© @ 没有 写 attr name ， 则 默认 取 上 自己 的 值 ， 这 里 是 取 div 的 c 属性 。 


=attr 相似 ， 只 是 它 把 节点 的 属性 值 当 成 节点 scope 的 属性 名 来 使 用 ， 作 用 相当 于 上 面 
例子 中 的 @xx : 


"TestCtr!" 
"here" 


return 


return 
>=aDe. 
A! 


'TestCtr1' 
— a es 





&attr 是 包 和 一 个 函数 出 来 ， 这 个 函数 以 节点 所 在 的 scope AERM. KA—MERY 
例子 : 


"TestCtrl" 
"here = here + 1" "show(here)" 


return 


OONOOABRWN EE 


return 


'&abc ' > -engc lick: 
VA! 


'TestCtrl' 
123 





只 是 其 中 的 here 是 TestCtrl 的 。 


scope.b Æ &ngClick , El: 


er ae 


这 里 的 show() 和 here 都 是 Testctrl 的 ， 于 是 上 面 的 代码 最 开始 会 在 终 病 输出 
一 个 PA. 


当 点 击 “ 这 里 "时 ， 这 时 执行 的 ”show(here) 就 是 llink 中 定义 的 那个 画 数 了 ， 和 与 
TestCtrl AR. BE, Hay scope.a({here:5}) ， 因 为 a 执行 时 是 
Testctrl 的 上 下 文 ， 于 是 向 a 传递 的 一 个 对 象 ， 里 面 的 所 有 属性 Testctrl WE 
AFT, BRAT here=here+1 ， 于 是 我 们 会 在 屏幕 上 看 到 6. 


这 里 是 一 个 上 下 文 交 错 的 环境 ， 通 过 & 这 种 机 制 ， 让 指令 的 scope 和 与 节点 的 scope 
发 生 了 互动 。 真 是 鬼 径 伸 工 的 设计 。 而 实现 它 ， 只 用 了 几 行 代码 : 


case '&': 


return 


break 





£ controller 这 个 参数 。 这 个 参数 的 作用 是 提供 一 个 controller 的 构造 函数 ， 它 会 在 
compile 图 数 之 后 ， 1Link AZAR. 


'compile' 
return 
'link' 


OONOTBRWNE 


'controller' 


return 





controller 的 最 后 一 个 参数 ， $transclude , 是 一 个 只 接受 cloneAttachFn 作为 
参数 的 一 个 函数 。 


按 官 方 的 说 法 ， 这 个 机 制 的 设计 目的 是 为 了 让 各 个 指令 之 间 可 以 互相 通信 。 参考 普 通 节 
点 的 义理 方式 ， 这 里 也 是 义理 指令 scope 的 合适 位 置 。 


this 


return 


return 


return 





name 参数 在 这 里 可 以 用 以 为 controller 重 起 一 个 名 字 ， 以 方便 在 require 参数 中 引 
用 。 


require 参数 可 以 带 两 种 前 级 (可 以 同时 使 用 ) 
e。? ， 如 果 指 定 的 controller 不 存在 ， 则 忽略 错误 。 即 : 


如 果 名 为 not_b 的 controller 不 存在 时 ， 不 会 直接 抛 出 错误 ， link WA 
中 对 应 的 $controller 为 undefined 。 


e。 人 人， 同时 在 父 级 节点 中 寻找 指定 的 controller ， 把 上 面 的 例子 小 改 一 下 : 


Ei 


把 a 的 require KR (ARTE nota 这 个 controller ) 


'?Nnot_a' 


还 剩 下 几 个 模板 参数 : 


| template 模板 内 容 ， 这 个 内 容 会 根据 replace 参数 的 设置 蔡 换 节点 或 只 替换 节点 内 容 。 
| templateUrl 模板 内 容 ， 获 取 方 式 是 异步 请 求 。 


| replace 设置 如 何 处 理 模 板 内 容 。 为 ”true 时 为 著 换 抒 指 邻 节点 ， 否 则 只 著 换 到 节点 内 容 。 


return 


: '<p> 标 题 {{ name }} <button ng-click="name=\' '"> 修 改 </button> 


</p>' 
//replace: true, 
//controller: function($scope){$scope.name = 'xxx'}, 
//scope: {}, 
: true 


ur 


'TestCtr1' 
= 123 





template 中 可 以 包括 变量 引用 的 表达 式 ， 其 scope BF scope 参数 的 作用 (可 能 受 继 
承 天 系 影响 ) o 


templateUrl 是 异步 请 求 模 板 内 容 ， 并 且 是 获取 到 内 容 之 后 才 开 始 执 行 指令 的 compile 


最 后 说 一 个 compile 这 个 参数 。 它 除了 可 以 返回 一 个 函数 用 为 ”link 男 数 之 外 ， 还 可 
以 返回 一 个 对 象 ， 这 个 对 象 能 包括 两 个 成 员 ， 一 个 pre ， 一 个 post 。 实 际 上 ， link 
贺 数 是 由 两 部 分 组 成 ， 所 谓 的 preLink 和 postLink 。 区 别 在 于 执行 顺序 ， 特 别 是 在 指令 
BREN EWE, postLink 是 在 所 有 的 子 级 指令 link 完成 之 后 才 最 后 执行 的 。 
compile 如 果 只 返回 一 个 函 效 ， 则 这 个 酌 数 仆 作为 postLink 使 用 : 





= 'Demo' 


'a compile' 
return 
'a link pre' 
'a link post' 


OONODOBRWNE 


12 return : 
13 : 'E! 


16 
17 
18 
19 
20 
21 
22 
23 
24 
25 


return 


return 


Th! 


'b compile’ 


'b link pre' 
'b link post' 





18.9. Attributes 的 细节 


节点 属性 被 包装 之 后 会 传 给 compile 和 link 加 数 。 从 这 个 操作 中 ， 我 们 可 以 得 到 
节点 的 引用 ， 可 以 操作 节点 属性 ， 也 可 以 为 节点 属性 注册 侦 听 事件 。 


A Fe Moc 


return 





整个 Attributes 对 象 是 比较 简单 的 ， 它 的 成 员 包 括 了 : 


| $$element 属性 所 在 的 节点 。 

| sattr 所 有 的 属性 值 (类 型 是 对 象 )。 

| $normalize 一 个 名 字 标 准 化 的 工具 了 豆 数 ， 可 以 把 ng-click 变 成 ngclick 。 
| $observe 为 属性 注册 侦 听 器 的 画 数 。 


| $set 设置 对 象 属性 ， 及 节点 属性 的 工具 。 


除了 上 面 这 些 成 员 ， 对 象 的 成 员 还 包括 所 有 属性 的 名 字 。 
先 看 $observe 的 使 用 ， 基 本 上 相当 于 $scope 中 的 Swatch : 


"TestCtrl" 
At a }}" xX 
wasza is 


return 


: 'E! 


'TestCtrl1' 
=i 





$set 方法 的 定义 是 : function(key, value, writeAttr, attrName) { ... } o 


e key 对 象 的 成 员 名 。 

value 需要 设置 的 值 。 

writeAttr 是 否 同时 修改 DOM 节点 的 属性 (注意 区 别 “ 节 点 ”与 “对 象 ”) ， 默 认 
为 Bee 。 

e attrName 实际 的 属性 名 ， 与 “标准 化 "之 后 的 属性 名 有 区 别 。 


"TestCtrl" 
“1283. "show(1)" 


true, “cd” 


return 
'E! 


'TestCtrl1' 





MIF PURSE, RIN RB aAt, MaltRA i, BEES welt IA 
的 。 但 是 手动 $set 的 新 属性 ， 不 会 目 动 做 标准 化 处 理 。 


18.10. 预定 义 的 NgModelController 


在 前 面 讲 conroller 参数 的 时 候 ， 提 到 过 可 以 为 指令 定义 一 个 conroller 。 官方 的 实现 
中 ， 有 很 多 已 定义 的 指 合 ， 这 些 指 命 当中， 有 两 个 已 定义 的 conroller ， 它 们 是 
NgModelController 和 FormController ， 对 应 ng-model 和 form 这 两 个 指令 (可 以 参照 
朋 面 的 “表单 控件 "一 章 ) 。 


在 使 用 中 ， 除 了 可 以 通过 $scope 来 取得 它们 的 引用 之 外 ， 也 可 以 在 自 定义 指 命中 通 
过 require 参数 直接 引用 ， 这 样 就 可 以 在 lin WAH controller 去 实现 一 些 功 


Sb 
Abo 


先 看 NgModelController 。 这 东西 的 作用 有 两 个 ， 一 是 控制 Viewalue 与 
ModelValue 之 间 的 转换 天 条 〈( 你 可 以 实现 看 到 的 是 一 个 值 ， 但 是 存 到 变量 里 变 成 了 另 
外 一 个 值 ) ， 二 是 与 FormController 配合 做 数据 校 验 的 相关 你 辑 。 


先 看 两 个 应 该 是 最 有 用 的 属性 : 


| $formatters 是 一 个 由 画 数组 成 的 列表 ， 串 行 执行 ， 作 用 是 把 变量 值 变 成 显示 的 值 。 


| Sparsers 与 上 面 的 方向 相反 ， 把 显示 的 值 变 成 变量 值 。 


假设 我 们 在 变量 中 要 保存 一 个 列表 的 类 型 ， 但 是 显示 的 东西 只 能 是 字符 串 ， 所 以 这 两 者 
之 间 需 安 一 个 转换 : 


"Testctrl" 
"Text. a 
"show(a)" 


'test' 


return 


al 
2 
3 
4 
5 
6 
7 
8 
9 


return 


return return 
: 'ngModel' 
- DAN 


'TestCtrl' 


//%scope. a = 11,2 3] 





上 面 在 定义 test MED, require 参数 指定 了 ngModel 。 同 时 因为 DOM 结构 ， 
ng-model 是 存在 的 。 于 是 ， link 阔 数 中 束 可 以 获取 到 一 个 NgModelController 的 
实例 ， 即 代码 中 的 $ctrl o 


我 们 添加 了 需要 的 过 滤 函 效 : 


o 从 变量 ( Modelvalue ) 到 显示 值 ( Viewvalue ) 的 过 程 ， $formatters B 
性 ， 把 一 个 列表 变 成 一 个 字符 串 。 
。 从 显示 值 到 变量 的 过 程 ， $parsers 属性 ， 把 一 个 字符 串 变 成 一 个 列表 。 


对 于 显示 值 和 变量 ， 还 有 其 它 的 API ， 这 里 融 不 细 说 了 。 


另 一 部 分 ， 是 关于 数据 校 验 的 ， 放 到 下 一 章 同 FormController 一 起 讨论 。 


18.11. HE 389 FormController 


前 面 的 “表单 控制 " 那 章 ， 实 际 上 讲 的 就 是 FormController ， 只 是 那里 是 从 scope PH 
取 到 的 引用 。 现 在 从 指 合 定义 的 角度 ， 来 更 清楚 地 了 解 FormController K 
NgModelController 是 如 何 配合 工作 的 。 


先 说 一 下 ， form 和 ngForm 是 官方 定义 的 两 个 指令 ， 但 是 它们 其 实 是 同一 个 未 西 。 

者 只 人 允许 以 标签 形式 使 用 ， 而 后 者 允许 EAC 的 形式 。DOM 结构 中 ， form 标签 不 能 
RE, (BZ ng 的 指令 没有 这 个 限制 。 不 管 是 form 还 是 ngForm ， 它 们 的 

controller 都 被 命名 成 了 form 。 所 以 require 这 个 参数 不 要 写 错 了 。 


FormController 的 几 个 成 员 是 很 好 理解 的 : 


| $pristine 表单 是 否 被 动 过 
| $dirty 表单 是 否 没 被 动 过 
| $valid 表单 是 否 验 通过 
| sinvalid 表单 是 否 检验 未 通 
| $error 表单 中 的 错误 


| $setDirty() 直接 设置 $dirty 及 $pristine 


"TestCtrl" 


wa "email" 
"do( ) i 


'test' 


do = 
//$ctrl.$setDirty(); 
//form 是 否 没 被 动 过 


/Vform 是 否 和 被 动 过 
//form 是 否 被 检验 通过 
//form 是 人 否 有 错误 
//form 中 有 错误 的 字段 


return : return 
: 'Form' 
: AS 


'TestCtrl1' 





$error 这 个 属性 ， 是 一 个 对 象 ， key 是 错误 名 ， value 部 分 是 一 个 列表 ， 其 成 员 是 
对 应 的 NgModelController 的 实例 。 


FormController 可 以 自由 增 减 它 包含 的 那些 ， 类 似 于 NgModelController 的 实例 。 在 
DOM 结构 上 ， 有 ng-model BY input 节点 的 NgMoelController 会 被 自动 添加 。 


| $addControl() 添加 一 个 conroller 


| $removeControl() 删除 一 个 controller 


这 两 个 手动 使 用 机 会 应 该 不 会 很 多 。 被 添加 的 实例 也 可 以 手动 实现 所 有 的 
NgModelController 的 方法 


"TestCtrl" 


wgon "email" 
"add( ) " 


1 
2 
3 
4 
5 
6 
7 
8 
9 


return return 


return 


'TestCtrl' 





整合 FormController 和 NgModelController 就 很 容易 扩展 各 种 类 型 的 字段 : 


"Testctrl" 
nm iu 
"my" uon 


"show( ) i 





CONOOBRWNE 





虽然 官方 原来 定义 了 几 种 type ， 但 这 不 妨 但 我 们 继续 扩展 新 的 类 型 。 如 果 新 的 
type 参数 值 不 在 官方 的 定义 列表 里 ， 那 会 按 text 类 型 先 做 人 处理， 这 其 实 什么 影响 
都 没有 。 剩 下 的 ， 束 是 写 我 们 自己 的 验证 逻辑 束 行 了 。 


上 面 的 代码 是 参见 官方 的 做 法 ， 使 用 格 陈 化 的 过 程 ， 同 时 在 里 面 做 有 效 性 检查 。 


18.12. 示例 : 文本 框 


这 个 例子 与 家 网 上 的 那个 例子 相似 。 最 终 是 要 显示 一 个 文本 框 ， 这 个 文本 框 由 标题 和 内 
容 两 部 分 组 成 。 而 且 标 题 和 内 容 则 是 引用 controller 中 的 变量 值 。 


HTML 部 分 的 代码 : 


"Testctrl" 
"title" "text" 
"title" 


"text" 
title; ae Ge 





从 这 个 期 望 实现 效果 的 HTML 代码 中 ， 我 们 可 以 考虑 设计 指 全 的 实现 方式 : 


这 个 指使 的 使 用 方式 是 “标签 ”"” Bl restrict 这 个 参数 应 该 设置 为 E o 
节点 的 属性 和 值 是 对 controller 变量 的 引用 ， 那 么 我 们 应 该 在 指 命 的 scope 中 
使 用 = 的 方式 来 指定 成 员 值 。 

。 最 终 的 效果 显示 需要 进行 DOM 结构 的 重 构 ， 那 直接 使 用 template MYT. 
。 自 定 义 的 标签 在 最 终 效 果 中 是 多 余 的 ， 所 有 replace 应 该 设置 为 true o 


JS 部 分 的 代码 : 


'ysBlock' 
return ; 
: '<div style="width: 200px; border: 1px solid black; "><h1 
style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1><div>{{ 
text }}</div></div>' 
Ge ite 

: '"=title' : '=text' 
: 'E! 


'TestCtrl1' 
= “标题 在 这 里 ， 
= “内 容 在 这 里 ， 





可 以 看 到 ， 这 种 简单 的 组 件 式 指令 ， 只 需要 作 DOM 结构 的 变换 即 可 实现 ， 连 
compile 国 数 都 不 需要 写 。 


18.13. 示例 : 模板 控制 语句 for 


这 个 示例 党 试 实现 一 个 重复 语句， 功能 同 官方 的 ngRepeat ， 但 是 使 用 方式 类 似 于 我 
{11388 Rt a PRY for 语句 : 


"TestCtrl" "obj_list=[1,2,3,4]; name='name'" 


"obj_list=[1,2]; name='o?'" 





Az, RINIMLANERTAIZZERTETNEN : 


。 IE- TRENNEN, MUAA anA RA eAnem 
了 ， 于 是 权重 要 比较 高 ， 并 且 “ 到 此 为 止 "一 一 priority 设置 为 1000 , 
terminal 设 年 为 true o 

。 使 用 时 的 语法 问题 。 事 实 上 浏览 器 会 把 for 节点 补充 成 一 个 正确 的 HTML 
结构 ， 即 里 面 的 属性 都 会 变 成 类 似 o="" 这样。 我 们 通过 节点 的 
outerHTML 属性 取 到 字符 串 并 解析 取得 需要 的 信息 。 

。 RNE for 节点 之 间 的 内 容 作 为 一 个 模板 ， 并 且 通 过 循环 多 次 泻 染 该 模板 

之 后 把 结果 填充 到 合适 的 位 置 。 

在 处 理 上 面 的 那个 模板 时 ， 需 要 不 断 地 创建 新 scope 的， 并且 o 这 个 成 

员 需 要 单独 赋值 。 


注意 : 这 里 只 是 简单 实现 功能 。 官 方 的 那个 ngRepeat 比较 复杂 ， 是 做 了 专门 的 算法 优 
化 的 。 当 然 ， 这 里 的 实现 也 可 以 是 简单 把 DOM 结构 变 成 使 用 ngRepeat 的 形式 :) 


JS 部 分 代码 : 


= 'Demo' 


'<for (.?)=.? in=.? (.?)=.*?>' 
I= 3)!throw “syntax: <for o in obj_list>' 


= 
© 


OONODOBRWNE 
Holl 
H 


28 
29 
30 
ot 
32 
33 
34 
35 
36 
37 
38 
39 


return 


return 


1000 
true 
1E! 


'TestCtrl' 


'Demo' 





18.14. 示例 : 模板 控制 语句 iflelse 


"TestCtrl" 





。 else 与 计 是 两 个 指令 ， 它 们 是 父子 关系 。 通 过 scope 可 以 联系 起 来 。 至 于 
scope 是 在 link 中 义理 还 是 controller 中 义理 并 不 重要 。 

e true 属性 的 条 件 判 断 通 过 $parse 服务 很 容易 实现 。 

。 如 果 最 终 效 果 要 去 掉 if 节点 ， 我 们 可 以 使 用 注释 节点 来 “ 占 位 ”。 


JS 代码 : 


= 'Demo' 


true 


OOANOOABRWNE 
I 


10 =e ee Eee. 


15 if 


18 else 
19 if I== undefined 


26 return 


29 return 


41 return 


44 return : 
45 : FE? 


48 'TestCtrl' 
49 = 1 


52 'Demo' 





代码 中 注意 一 点 ， 束 是 if_node 在 得 到 之 时 ， 融 已 经 是 做 了 变量 绑 定 的 了 。 错 误 的 思 
ME, F Swatch 中 再 去 不 断 地 得 到 新 的 if_node o 


